Components

Alert

Displays a short, important message that calls attention to a state or outcome without interrupting the user's flow.

Basic usage

Compose an Alert from an optional leading icon, an AlertTitle, and an AlertDescription.

Heads up

Your changes have been saved and will sync across devices shortly.

The icon has to be a direct child of Alert. The root is a grid whose first column only opens up under a has-[>svg] check, so wrapping the icon in a <span> silently collapses that column and the text loses its indent.

Variants

Three tones. default suits informational and success messages, warning flags something the user should plan for, and destructive signals an error they should act on now.

Profile updated

Your account details were saved successfully.

Trial ends in 3 days

Add a payment method to keep your workspace active after the trial.

Payment failed

We couldn't process your card. Update your billing details to continue.

All three variants sit on bg-card. warning and destructive tint the text using the -ink step of their colour rather than filling a coloured panel — see the note below on why.

Title only

The description is optional. For a one-line notice, render just an icon and an AlertTitle. Keep it short: the title is line-clamp-1 and will be truncated rather than wrapped, so anything longer belongs in an AlertDescription.

A new CLI version is available.

Why the coloured variants tint text, not background

--destructive and --warning are fill tokens: they are the background of a delete button or a status chip, paired with a -foreground that is legible on top of them. Used as text colour on bg-card they fail badly — warning yellow measures 1.59:1 in the light palette.

Both variants therefore reach for the -ink step, which is the same hue tuned for text on the page background. Measured against --card: destructive titles reach 7.15:1 light / 6.42:1 dark; warning titles 6.51:1 / 11.60:1. Descriptions are stepped down to /90 for hierarchy and still clear AA at 5.17:1 or better.

One consequence worth knowing when you build your own components: in the high-contrast light palette --warning-ink and --primary-ink resolve to the same value, and they are near-identical in both dark palettes. Alert gets away with it because its default variant is neutral card text rather than brand gold. A component whose default is brand — Progress, for one — has to carry a non-colour signal as well.

Props

Prop	Type	Default	Description
`variant`	'default' \| 'warning' \| 'destructive'	`'default'`	Tone of the alert. default is neutral card text; warning flags something the user should plan for; destructive flags an error they must act on.
`children`required	React.ReactNode	`—`	Compose with AlertTitle, AlertDescription, and an optional leading icon. The icon must be a direct <svg> child.
`className`	string	`—`	Additional Tailwind classes to merge.
`...rest`	React.ComponentProps<'div'>	`—`	All native div props are forwarded to the root element.

AlertTitle and AlertDescription are thin wrappers over <div> and accept all native div props plus className. The alertVariants cva helper is exported as well, for a surface that has to match an alert without being one.

Accessibility

The root element carries role="alert", so assistive technology announces the message as soon as it appears.
The leading icon is decorative and inherits the current text color — convey meaning through the title and description text, never color or icon alone.
Color is not the only signal: the warning and destructive variants pair their tone with explicit wording and a distinct icon.
Both coloured variants use the -ink text step, which is measured against --card in the light and dark palettes and clears WCAG AA in both, titles and descriptions alike.
Render the alert only when there is something to announce. Mounting an empty role="alert" region can cause spurious screen-reader announcements.