Back to Alert
View full API on Alert
Alert
Inline alerts
All tones and variants, including dismissible.
Heads up
This is a neutral, informational alert.
Payment received
Your invoice has been paid in full.
Storage almost full
You're at 92% of your plan's storage limit.
Sync failed
Check your connection and try again.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "soft" | "outlined" | "filled" | soft | Surface style. |
| tone | "default" | "success" | "warning" | "destructive" | default | Semantic color. |
| toast | boolean | false | When true, renders as a portaled toast instead of inline. |
| open | boolean | true | Controls visibility. |
| placement | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" | top-right | Fixed corner when `toast` is true. |
| duration | number | 5000 | Auto-close delay (ms) in toast mode; 0 disables. |
| persistent | boolean | false | Toast mode only — disables auto-close and outside-click dismiss. |
| pauseOnHover | boolean | true | Pauses auto-close while hovered in toast mode. |
| live | "assertive" | "polite" | assertive | Inline default is assertive; toast default is polite. |
| title | React.ReactNode | — | Bold heading line. |
| action | React.ReactNode | — | Optional action slot below the description. |
| icon | React.ReactNode | false | — | Override the tone icon, or false to hide. |
| dismissible / onDismiss | boolean / () => void | — | Close button; defaults to true in toast mode. |