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.
Variants
The default variant suits informational and success messages, while destructive signals an error the user should act on.
Profile updated
Your account details were saved successfully.
Payment failed
We couldn't process your card. Update your billing details to continue.
Title only
The description is optional. For a one-line notice, render just an icon and an AlertTitle.
A new CLI version is available — run npm i -g @comitor/cli.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'default' | Visual tone of the alert. Use destructive for errors and failures. |
childrenrequired | React.ReactNode | — | Compose with AlertTitle, AlertDescription, and an optional leading icon. |
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.
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 destructive variant pairs its red tone with explicit wording and a warning icon.
- Render the alert only when there is something to announce. Mounting an empty
role="alert"region can cause spurious screen-reader announcements.