Alert Dialog
A modal dialog for destructive confirmations. The user must explicitly accept or cancel — there is no close button. Built on Radix UI AlertDialog.
Delete account
Revoke access
Installation
pnpm
pnpm dlx @hex-core/cli add alert-dialogAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state for uncontrolled usage |
onOpenChange | function | — | Callback fired on open state change: (open: boolean) => void |
AI Guidance
When to use
Use for destructive or irreversible confirmations: delete account, discard changes, permanent actions. The user must explicitly choose Action or Cancel.
When not to use
Don't use for non-destructive dialogs (use Dialog). Don't use for simple notifications (use Toast). Don't use when there's only one action to take.
Common mistakes
- Using Dialog when AlertDialog is semantically required
- Omitting AlertDialogCancel (user must have an escape hatch)
- Putting more than one AlertDialogAction (the pattern expects one destructive action)
- Making the action button non-destructive styled
Accessibility
Radix sets role='alertdialog', traps focus, focuses AlertDialogCancel by default, and closes on Escape. Clicks outside the dialog are prevented (user must choose Cancel or Action).
Token budget: 650