Feedback & Status
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.