Search for a command to run...
A modal that **forces** an explicit choice — no outside-click dismiss, no Esc escape by default. For the standard confirm pattern, reach for `ConfirmDialog` (built on these parts); use raw AlertDialog only for confirms its shape can't express.
AlertDialogAction defaults to Button variant="solid"; pass variant="destructive" for delete-style confirms. AlertDialogCancel defaults to variant="ghost". Both render as Buttons under the hood, so they accept the full Button prop surface.
AlertDialogState container. Forwards every Radix AlertDialog.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Fires when the dialog opens or closes. |
AlertDialogContentThe centered confirm card. Same bg-surface-primary + shadow.max chrome as Dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | default = max-w-md on desktop with left-aligned header. sm stays max-w-xs with centered header and a 50/50 button grid — denser confirm pattern. |
className | string | — | Override widths / spacing for the rare bespoke confirm. |
AlertDialogHeader / AlertDialogTitle / AlertDialogDescriptionTypography slots. AlertDialogTitle is required for screen-reader announcement.
AlertDialogTitle — text-lg font-medium text-fg-high.AlertDialogDescription — text-sm text-fg-mid.AlertDialogMediaOptional size-16 rounded-full bg-sand-9/10 icon tile above the title. Drop a status icon inside (e.g. <TrashIcon className="text-fg-error" />) for destructive confirms — the chip carries the meaning before the user reads the text.
AlertDialogFooterLayout slot. Mobile: stacked with primary on top (via flex-col-reverse). Desktop default: right-aligned row. sm size: 50/50 two-column grid (Cancel left, Action right).
AlertDialogAction / AlertDialogCancelPre-styled Button wrappers that bind to Radix's Action / Cancel semantics. Pass any Button variant / size to override defaults.
| Component | Default variant | Notes |
|---|---|---|
AlertDialogAction | "solid" | The primary confirm. Pass variant="destructive" whenever the action is irreversible. |
AlertDialogCancel | "ghost" | The escape hatch. Stays quiet so it never visually competes with the action. |
Reach for ConfirmDialog first — it fixes the confirm layout, button variants, and copy shape
on top of these parts. Drop to raw AlertDialog only when the confirm genuinely can't fit that
shape.
Use AlertDialog only when the action is irreversible or destructive — delete, leave,
revoke. For ordinary modals (edit a profile, pick a file), Dialog is the right tool.
Pair AlertDialogAction variant="destructive" with AlertDialogMedia containing a red status
icon. The red tint + red icon are the two visual tells separating a careful click from regret.
Phrase the title as the question ("Delete this workspace?"). Phrase the action button as the verb ("Delete workspace") — the user re-reads the verb at click time.
Stack two destructive actions side-by-side. Show one primary action and one cancel — anything else dilutes the confirm.
Use AlertDialog for celebrating a non-action ("Saved!"). Toasts (toast.success) or a
Dialog with a single confirm read more correctly.