# AlertDialog

Interrupting confirmation dialog for destructive or unrecoverable actions. The user must explicitly confirm or cancel — clicking outside does not dismiss. Built on Radix Alert Dialog.

[View examples](https://marsam.rahhal.app/components/alert-dialog) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/alert-dialog`

**Category:** `overlays`

## Anatomy

| part | role |
| --- | --- |
| AlertDialog · Trigger · Portal | Radix root + trigger + portal |
| AlertDialogContent | centered dialog body |
| AlertDialogHeader / Title / Description | title + body copy |
| AlertDialogFooter | right-aligned action area (stacks vertically on small screens) |
| AlertDialogAction | confirm button (uses default Button styling) |
| AlertDialogCancel | dismiss button (outline variant) |

## When to use vs Dialog

- **AlertDialog** — irreversible actions: delete, archive, sign out, abandon a form with unsaved changes.
- **Dialog** — focused interactions that don't carry that weight: editing, viewing details, completing a step.