e8-alert
Updated on Aug 12, 2025 3 minutes to readProvide contextual feedback messages for common user actions using a flexible alert component.
Overview
Alerts can contain any length of text and optionally include a dismiss button.
<e8-alert
:show="true"
:dismissible="true"
variant="success"
on-dismissed="onDismissed"
>
Dismissible Alert!
</e8-alert>Properties
| Property | Description | Type | Default |
|---|---|---|---|
| dismissible | Enables the dismiss (close) button when set to true. | boolean | false |
| show | Controls whether the alert is visible. | boolean | false |
| variant | Applies one of the theme color variants to the alert. | E8BackgroundColorVariants | 'primary' |
Slots
| Slot | Description |
|---|---|
| default | Main content of the alert. |
| dismiss | Custom content for the close button. |
Events
| Event | Description |
|---|---|
| on-dismissed | Emitted when the alert is dismissed. |
Properties Details
Dismissible
Makes the alert dismissible by adding a close (X) button.
Default: false
Copy this snippet into the Content section
$methods.set('onDismissed', () => {
$notify.info('Alert was dismissed!')
});Copy this snippet into the Content section
<e8-alert
dismissible
show
on-dismissed="onDismissed"
>
Dismissible Alert!
</e8-alert>Show
Controls the visibility of the alert. Set show to true to display the alert, or false to hide it.
Default: false
Variant
Applies a color variant.
<e8-alert variant="primary" show> Primary</e8-alert>
<e8-alert variant="secondary" show> Secondary</e8-alert>
<e8-alert variant="success" show> Success</e8-alert>
<e8-alert variant="danger" show> Danger</e8-alert>
<e8-alert variant="warning" show> Warning</e8-alert>
<e8-alert variant="info" show> Info</e8-alert>
<e8-alert variant="light" show> Light</e8-alert>
<e8-alert variant="dark" show> Dark</e8-alert>
<e8-alert variant="white" show> White</e8-alert>Slots Details
Dismiss
Slot for providing a custom close button.
<e8-alert
:dismissible="true"
show
>
Dismissible Alert!
<template #dismiss>
<e8-icon name="x-lg"></e8-icon>
</template>
</e8-alert>Events Details
On dismissed
Emitted when the badge is closed using the close (X) button.
E8App.$methods.set('onDismissed', () => {
E8App.$notify.info('Alert was dismissed!')
});<e8-alert
:dismissible="true"
show
on-dismissed="onDismissed"
>
Dismissible Alert!
</e8-alert>