alert
Alert
A short message in neutral, info, success, warning or error, with an optional icon, title, description and an action such as dismiss.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| Alert | Alert.vue | Shows a short message to the shopper, with an optional icon, title and description. |
| AlertAction | AlertAction.vue | Holds a button or link that lets the user act on or dismiss the alert. |
| AlertDescription | AlertDescription.vue | Shows the detail text of the alert below its title. |
| AlertTitle | AlertTitle.vue | Shows the headline of the alert. |
Anatomy
<Alert>
<AlertTitle />
<AlertDescription />
</Alert>Styling
| Part | Recipe |
|---|---|
| Alert | alert |
| AlertDescription | alert-description |
| AlertTitle | alert-title |
Install
Writes 6 files into components/ui/alert/. For agents, npx @frontic/ui docs alert prints this reference as markdown; the MCP server serves the same.
- npm packages
- @lucide/vue
- class-variance-authority
- reka-ui
API reference
Alert Alert.vue
Shows a short message to the shopper, with an optional icon, title and description. Renders a <div>.
| Prop | Type | Default | |
|---|---|---|---|
| class | ClassValue | — | |
| variant | AlertVariant | 'neutral' | |
| icon | boolean | true | |
| Slot | Slot props | |
|---|---|---|
| icon | — | |
| Data attribute | Values | |
|---|---|---|
| data-variant | 'neutral' | 'info' | 'success' | 'warning' | 'error' | |
| Recipe alert | Sets | |
|---|---|---|
| base: alert | 16 properties | |
| variant: info | 3 properties · 2 inherited | |
| variant: success | 3 properties · 2 inherited | |
| variant: warning | 3 properties · 2 inherited | |
| variant: error | 3 properties · 2 inherited | |
AlertAction AlertAction.vue
AlertDescription AlertDescription.vue
AlertTitle AlertTitle.vue
Example