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 |
|---|---|---|---|
| show | Controls whether the alert is visible. | boolean | false |
| dismissible | Enables the dismiss (close) button when set to true. | boolean | false |
| variant | Applies one of the theme color variants to the alert. | BackgroundVariants | 'primary' |
Slots
| Slot | Description |
|---|---|
| default | Main content of the alert. |
| dismiss | Custom content for the close button. |
Events
| Event | Description | Arguments |
|---|---|---|
| on-dismissed | Emitted when the alert is dismissed. | — |
Details
Visible state
Use the show prop to control the visibility of the alert. By default, alerts are not visible.
Set show to true to display the alert and false to hide it.
Dismissible alerts
To make the alert dismissible, set the dismissible prop to true.
This adds a close (X) button to the component.
You can customize the dismiss button using the dismiss slot.
// Insert this code into Main or Initialization script of the form to register a global method
// Register a global method `onDismissed`
E8App.$methods.set('onDismissed', () => {
// Show an info notification when the alert is dismissed
E8App.$notify.info('Alert was dismissed');
});<!-- Copy this snippet into the Content section -->
<e8-alert :dismissible="true" show on-dismissed="onDismissed">
Dismissible Alert!
<template #dismiss>
<e8-icon name="x-lg"></e8-icon>
</template>
</e8-alert>Contextual variants
Apply contextual styling by setting the variant prop.
<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>