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. | ElementSizes | '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. | ButtonVariants | '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. | — |
Details
Active State
Use the active prop to apply active styling.
Block Style
Set block to true to make the button full-width.
Circle Style
Set circle to true to render a circular button. When circle is true, pill is effectively ignored.
Disabled State
Set disabled to true to prevent interaction. The component will not emit the click event.
Loading State
Set loading to true to show a small spinner and stop action emission while work is in progress.
Contextual Variants
Set variant to choose a color variant (default is 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>Outlined Style
Set outlined to true to use the outline variant instead of the filled style.
<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 Style
Enable the pill prop to render a button with rounded edges.
By default, pill is true. To render a standard button without pill styling, set :pill="false":
Size Variants
Set the size prop to render small, large, or default-sized buttons.
Custom Tag
Use tag to change the rendered element (e.g., a, div). Note: when tag is not 'button' the type attribute is not applied.
Button Type
The type prop (button, submit, reset) is applied only when the rendered tag is a native <button>. If you set tag="a" or another element, the type attribute won't be present.