Alert
Displays a callout for user attention. Compose an Alert from an optional icon,
an AlertTitle, and an AlertDescription.
Heads up!
You can add components to your app using the CLI.
Danger
Use variant="danger" for errors and dangerous or failed operations.
Payment failed
Your payment could not be processed. Please check your payment method and try again.
Without icon
Icons are optional children — omit the icon and the content spans the full width.
Scheduled maintenance
The service will be unavailable on Sunday from 2–4 AM UTC.
Title only
Your changes have been saved.
Component props
Alert
| Name | Type | Description |
|---|---|---|
| variant | 'default' | 'danger' | Visual style (default: "default") |
| children | ReactNode | An optional svg icon, AlertTitle, and AlertDescription |
Alert, AlertTitle, and AlertDescription all accept standard div props
including className, and expose data-slot="alert", data-slot="alert-title",
and data-slot="alert-description" attributes for styling.