Alert dialog
A confirmation that must not be dismissed by accident. Unlike Dialog it cannot be closed by clicking the overlay or pressing Esc — the person has to choose. Use it for every destructive or irreversible action.
Purpose
Reach for AlertDialog when undoing the action is impossible or expensive. If the task is
editable work rather than a decision, use Dialog — that page also
carries the full comparison of the three overlay surfaces.
Confirmation
Structure
| Property | Value |
|---|---|
| Surface | --card, --radius-xl (12px), --shadow-16 |
| Overlay | black at 60% |
| Width | max 448px |
| Title | 18px / Inter 600 |
| Motion | 200ms fade + 95% zoom, ease-out |
Best practices
Do
- Confirm every destructive or irreversible action with an
AlertDialog. - Name the confirm button after the action: "Reject claim", never "Yes".
- State the consequence in the description — who is notified, what cannot be undone.
- Mark the confirming action
destructiveso its weight matches its effect.
Don't
- Use a
Dialogfor confirmations — it can be dismissed by clicking outside. - Label the buttons "OK" and "Cancel" when the action has a name.
- Open one from inside another modal — flatten the flow instead.
- Use it for routine confirmations users perform dozens of times a day.
Accessibility & keyboard
- Focus is trapped inside while open and returned to the trigger on close.
- Title and description are announced (
aria-labelledby/aria-describedby). - Initial focus lands on Cancel, so Enter cannot accidentally confirm.
- Keyboard: Tab cycles within; there is deliberately no Esc dismissal on the confirm path.
Every AlertDialog part and prop in Storybook
Dialog
A modal window for a focused task — editing a record, previewing a document, a short form. It traps focus, returns it to the trigger on close, and can be dismissed by overlay click, Esc or the × button.
SheetDraft
A panel that slides in from any edge of the screen — filters, detail views and secondary forms. Use it when the person still needs the context of the page behind.