Alert
Contextual feedback banners with a colored left border, icon, optional title, and dismiss button.
Examples
Info
Heads up
Your session will expire in 10 minutes. Save any unsaved changes.
vue
<Alert variant="info" title="Heads up">
Your session will expire in 10 minutes. Save any unsaved changes.
</Alert>Success
Changes saved
Your plant configuration was updated successfully.
vue
<Alert variant="success" title="Changes saved">
Your plant configuration was updated successfully.
</Alert>Warning
Approaching quota
You have used 85% of your monthly export allowance.
vue
<Alert variant="warning" title="Approaching quota">
You have used 85% of your monthly export allowance.
</Alert>Danger
Action required
Two pieces of equipment have overdue maintenance inspections.
vue
<Alert variant="danger" title="Action required">
Two pieces of equipment have overdue maintenance inspections.
</Alert>Dismissible
New feature
Sieve test reports can now be exported as PDF. Check the Reports tab.
vue
<Alert variant="info" title="New feature" dismissible @dismiss="onDismiss">
Sieve test reports can now be exported as PDF. Check the Reports tab.
</Alert>No title
Loadout event recorded successfully.
vue
<Alert variant="success">
Loadout event recorded successfully.
</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'danger' | 'info' | Color and icon style |
title | string | — | Bold heading above the slot content |
dismissible | boolean | false | Show a close button; hides the alert on click |
Emits
| Event | Payload | Description |
|---|---|---|
dismiss | — | Fired when the user clicks the dismiss button |
Slots
| Slot | Description |
|---|---|
default | Alert body content |