Alert
Inline message for status, warnings, or callouts. Two visual variants and slots for an icon, title, and description.
Default
Neutral alert with icon, title, and body.
Heads up!
You can add components to your app using the CLI.
Destructive
Use for failures and irreversible actions.
Payment failed
Your card was declined. Try a different payment method.
Without icon
Drop the leading icon for plain text alerts.
Scheduled maintenance
The service will be unavailable on Saturday from 2 to 4 AM UTC.
API Reference
Props, events, and slots for each sub-component.
Alert
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | Visual tone. |
| class | string | — | Extra classes, merged with cn(). |
AlertTitle / AlertDescription
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Override typography or spacing. |