On This Page
Attention-grabbing components to highlight alerts, success, and warnings.
default / infoStandard informational statuses, updates, system noticessuccessConfirming positive operations completed successfully (profile saved, payment completed)warningNon-blocking notifications requiring direct attention (subscription ending, resource thresholds)destructiveBlocking errors, action failures, network connection disruptionsminimalLow-priority notifications inside content blocks or dashboards sidebarsbannerTop-level full-screen announcements or urgent alerts alerts| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "success" | "warning" | "info" | "glass" | "floating" | "minimal" | "neon" | "cyberpunk" | "gradient" | "banner" | "default" | Visual style of the alert layout. |
| title | React.ReactNode | — | Title heading text of the alert. |
| description | React.ReactNode | — | Supporting message description text. |
| icon | React.ReactNode | — | Custom Lucide icon element (supplied automatically based on variant if empty). |
| dismissible | boolean | false | Whether the user can close the alert by clicking a close 'X' button. |
| onDismiss | () => void | — | Callback triggered when the close button is clicked. |
| animate | boolean | true | Enables slide-in slide-out entry animations. |
| actionText | string | — | Label of action buttons on banner layout alerts. |
| onAction | () => void | — | Action callback triggered by action button clicks. |
role="alert", informing screen readers of high-priority content updates instantly.dismissible is set, focus lands on the close button which is tab-focusable and clickable via Space or Enter.