Alert Dialog
Blocking confirmation modal requiring an explicit decision. Backs the browser back button.
Install
Import path
Examples
Demo
A blocking modal that forces an explicit Cancel or confirm decision.
Basic
A basic alert dialog with a header, description, and confirm/cancel actions.
Small
Use size=sm for a compact, centered confirmation.
Media
Lead the header with an AlertDialogMedia icon for visual emphasis.
Small with media
Combine the compact size with a media icon.
Destructive
Pair a destructive media icon with a destructive action button.
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 {
AlertDialog, AlertDialogTrigger, AlertDialogContent,
AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
} from "@codefast/ui/alert-dialog";
<AlertDialog>
<AlertDialogTrigger asChild>…</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>…</AlertDialogTitle>
<AlertDialogDescription>…</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>…</AlertDialogCancel>
<AlertDialogAction>…</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
API reference
Props for each part of the component. All native element props are also forwarded.
AlertDialog
Root. A modal that traps focus and requires an explicit choice.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Control visibility from your own state. |
AlertDialogAction / AlertDialogCancel
| Prop | Type | Default | Description |
|---|---|---|---|
| onClick | (event) => void | — | Action confirms; Cancel dismisses. Both close the dialog. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Cycles focus within the dialog (trapped). |
| Esc | Triggers Cancel and closes the dialog. |
- Focus moves to the dialog on open; Cancel is the default focus target.
- Title and description are wired to aria-labelledby / aria-describedby.
- Unlike Dialog, it must not be dismissed by clicking the backdrop.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for irreversible or risky actions (delete, sign out everywhere).
- Label the action with the verb, e.g. “Delete”, not “OK”.
Don’t
- Don’t use for routine, reversible tasks — that’s a Dialog.
- Don’t make Cancel and the destructive action look identical.