Alert
Contextual banner with icon, title, and body. Supports default and destructive variants.
Install
Import path
Examples
Demo
Stack alerts to surface several status messages at once.
Basic
A basic alert with an icon, title and description.
Destructive
Use variant=destructive to create a destructive alert.
Action
Use AlertAction to add a button or other action element to the alert.
Custom colors
Customize the alert colors by adding utility classes to the Alert component.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Alert, AlertTitle, AlertDescription } from "@codefast/ui/alert";
<Alert variant="destructive">
<TriangleAlertIcon />
<AlertTitle>…</AlertTitle>
<AlertDescription>…</AlertDescription>
</Alert>
API reference
Props for each part of the component. All native element props are also forwarded.
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | Neutral information, or an error/danger banner. |
AlertTitle / AlertDescription / AlertAction
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The headline, body text, and an optional trailing action (e.g. dismiss). |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Use role=alert for messages that must be announced immediately; otherwise keep it static.
- Convey severity in the text, not colour alone.
- Keep the icon decorative — the meaning lives in the title and description.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use inline alerts for contextual, non-blocking messages.
- Pair destructive alerts with a clear next step.
Don’t
- Don’t use an inline Alert for a decision that must block — use Alert Dialog.
- Don’t stack many alerts; summarise instead.