e8-button
Updated on Sep 18, 2025 4 minutes to readA versatile button component with support for multiple styles, sizes, and states.
Overview
Buttons can display different variants, sizes, and shapes. They also support loading indicators, disabled state, and interactive behaviors.
<e8-button variant="success" size="lg">
Submit
</e8-button>Properties
| Property | Description | Type | Default |
|---|---|---|---|
| active | Applies active styling to the button. | boolean | false |
| block | Renders the button as a block-level element (full width). | boolean | false |
| circle | Renders the button as a circle if set to true. | boolean | false |
| disabled | Disables the button and updates cursor styling. | boolean | false |
| loading | Shows a spinner and disables interactions while loading. | boolean | false |
| outlined | Applies outlined styling to the button instead of filled. | boolean | false |
| pill | Renders a button with rounded edges when set to true. | boolean | true |
| size | Sets the button size. | E8ElementSizes | 'default' |
| tag | Custom HTML tag to render the button (button, a, etc.). | string | 'button' |
| type | The type attribute of the button (button, submit, reset). | string | 'button' |
| variant | Color variant of the button. | E8ButtonColorVariants | 'primary' |
Slots
| Slot | Description |
|---|---|
| default | Main content inside button. |
Events
| Event | Description | Arguments |
|---|---|---|
| on-click | Name of the event handler called when the button is clicked. | — |
Properties Details
Active
Enables visual active styling.
Default: false
Block
Makes the button span the full width by adding the btn-block class.
Default: false
Circle
Renders the button as a circle. When circle is true, the pill option is ignored.
Default: false
Disabled
Prevents interaction with the button. When disabled is true, the click event is not emitted.
Default: false
Loading
Displays a small spinner and disables action emission while work is in progress.
Default: false
Outlined
Applies the outline variant to the button instead of the filled style.
Default: false
<e8-button outlined variant="primary">Primary</e8-button>
<e8-button outlined variant="secondary">Secondary</e8-button>
<e8-button outlined variant="success">Success</e8-button>
<e8-button outlined variant="danger">Danger</e8-button>
<e8-button outlined variant="warning">Warning</e8-button>
<e8-button outlined variant="info">Info</e8-button>
<e8-button outlined variant="light">Light</e8-button>
<e8-button outlined variant="dark">Dark</e8-button>
<e8-button outlined variant="link">Link</e8-button>Pill
Renders the button with rounded edges.
Default: true.
Size
Specifies the button size.
Default: 'default'
Tag
Specifies the HTML tag for the rendered element (e.g., a, div). Note: when tag is not 'button' the type attribute is not applied.
Default: 'button'
Type
Specifies the button’s behavior when rendered as a native <button>. Supported values are button, submit, and reset. If tag is set to an element other than <button>, the type attribute is not applied.
Default: 'button'
Variant
Applies a button color variant.
Default: 'primary'
<e8-button variant="primary">Primary</e8-button>
<e8-button variant="secondary">Secondary</e8-button>
<e8-button variant="success">Success</e8-button>
<e8-button variant="danger">Danger</e8-button>
<e8-button variant="warning">Warning</e8-button>
<e8-button variant="info">Info</e8-button>
<e8-button variant="light">Light</e8-button>
<e8-button variant="dark">Dark</e8-button>
<e8-button variant="link">Link</e8-button>