Elena (server)

This page demonstrates Elena’s Progressive Web Components on a plain HTML page that has been pre-rendered server side using the @elenajs/ssr package.

For the default experience, see the Elena Client Side Demo with Partial SSR.

Default

<elena-stack>
  <elena-button type="submit">Button</elena-button>
  <elena-button icon="<svg>">Download</elena-button>
  <elena-button label="Settings" icon="<svg>"></elena-button>
</elena-stack>

Variant

<elena-stack>
  <elena-button variant="primary">Primary</elena-button>
  <elena-button variant="primary" icon="<svg>">Primary</elena-button>
  <elena-button>Default</elena-button>
  <elena-button variant="danger">Danger</elena-button>
  <elena-button variant="outline">Outline</elena-button>
  <elena-button disabled>Disabled</elena-button>
</elena-stack>

Size

<elena-stack>
  <elena-button size="sm" icon="<svg>">Small</elena-button>
  <elena-button size="md" icon="<svg>">Medium</elena-button>
  <elena-button size="lg" icon="<svg>">Large</elena-button>
</elena-stack>

Link

Elena on GitHub

External

Download

<elena-stack>
  <elena-button href="https://elenajs.com">Elena on GitHub</elena-button>
  <elena-button href="#" target="_blank" icon="<svg>">External</elena-button>
  <elena-button href="#file" download icon="<svg>">Download</elena-button>
</elena-stack>

Interactive

Count: "0"

<elena-stack>
  <elena-button variant="primary">Increment</elena-button>
  <elena-button variant="danger">Reset</elena-button>
</elena-stack>

Dynamic

Current: "primary"

<elena-stack>
  <elena-button variant="primary">Click to cycle</elena-button>
  <elena-button variant="primary">primary</elena-button>
</elena-stack>

Full width

<elena-button expand>Full width</elena-button>

Style

<elena-stack>
  <elena-button style="--bg:x">Custom style</elena-button>
  <elena-button style="--bg:x" icon="<svg>">Like</elena-button>
  <elena-button style="--bg:x" label="Love" icon="<svg>"></elena-button>
</elena-stack>