e8-dropdown-item-button
Updated on Sep 18, 2025 6 minutes to readA single actionable button inside an e8-dropdown menu.
Overview
e8-dropdown-item-button represents a clickable button within a dropdown menu.
It supports active and disabled states, custom styling through classes and text variants, and emits an event when clicked.
Use this component to define interactive actions inside a dropdown that do not navigate to a new page.
<e8-dropdown text="Actions">
<e8-dropdown-item-button @click="saveItem">Save</e8-dropdown-item-button>
<e8-dropdown-item-button
@click="deleteItem"
variant="danger"
>Delete</e8-dropdown-item-button
>
<e8-dropdown-item-button disabled>Disabled Action</e8-dropdown-item-button>
</e8-dropdown>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| active | Marks the button as active, typically highlighted. | boolean | false |
| disabled | Disables the button so it cannot be clicked. | boolean | false |
| button-class | Custom CSS classes applied to the button element. | E8CssClassType | — |
| variant | Text color variant applied when button is not active or disabled. | E8TextColorVariants | — |
Slots
| Slot | Description |
|---|---|
| default | Content of the button, typically text or icons. |
Events
| Event | Description |
|---|---|
| on-click | Event or method name triggered when the button is clicked. |