This page demonstrates Elena’s Progressive Web Components on a regular HTML page without any server side configuration. This is the recommended way to consume Elena components with or without a framework. Mostly, you will get almost identical experience as a user compared to a full pre-rendering done by the @elenajs/ssr tool.
For a demo with pre-rendered contents, see the Elena Server Side Demo.
<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><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><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>
<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>Count: "0"
<elena-stack>
<elena-button variant="primary">Increment</elena-button>
<elena-button variant="danger">Reset</elena-button>
</elena-stack>Current: "primary"
<elena-stack>
<elena-button variant="primary">Click to cycle</elena-button>
<elena-button variant="primary">primary</elena-button>
</elena-stack><elena-button expand>Full width</elena-button><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>