AlertDialog
Preview appears after the next Storybook update.
<AlertDialog />When to use
Use it for
- Before an action that cannot be undone or that affects other people: deleting, revoking, overwriting.
- tone primary for consequential but safe actions, like publishing a release to every consumer.
Not for
- Actions that can be undone: do them right away and offer Undo in a Toast.
- Collecting input: use Dialog.
- Routine saves: confirmation fatigue teaches people to click through without reading.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Ask a question that names the action and the object
"Delete 3 tokens?" with a confirm button "Delete tokens" is understood without reading the description.
Say the consequence, including what cannot be undone
"Components that use them fall back to their defaults. This cannot be undone."
"Are you sure?" with Yes and No
It hides what is about to happen. Name the action in the title and on the button.
Accessibility
- Base UI AlertDialog: role alertdialog, named by the title, described by the consequence.
- Focus starts on Cancel, the safe choice, so a reflexive Enter does not destroy anything.
- It does not close on an outside click; Escape and Cancel close it and focus returns to the trigger.
- While loading, the confirm button keeps focus and announces aria-busy.
Content guidelines
- Title: a question with the verb and the object and a count when there are several: "Delete 3 tokens?"
- Description: the consequence in one or two sentences. End with "This cannot be undone." only when true.
- Confirm label repeats the verb: "Delete tokens", "Revoke access". Never "OK" or "Yes".
- Cancel stays "Cancel".
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/AlertDialog/AlertDialog.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Title and description
.header - Cancel and confirm buttons
.actions
From Dialog
AlertDialog reuses the stylesheet of Dialog, so it also paints with these 31 tokens. Changing them changes both.
Motion and interaction
AlertDialog animates on open and close. Try it in the preview at the top.
| When | What changes | Duration | Easing |
|---|---|---|---|
| Open | Fade and movement | motion.duration.moderate200 ms | motion.easing.enterstarts fast, lands softly |
| Close | Fade and movement | motion.duration.fast150 ms | motion.easing.exitstarts softly, leaves fast |
With reduced motion turned on, every change happens at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/AlertDialog/AlertDialog.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | none | No description in the code yet. |
defaultOpen | boolean | none | No description in the code yet. |
onOpenChange | (open: boolean) => void | none | No description in the code yet. |
children | ReactNode | none | AlertDialogTrigger and AlertDialogContent. |
Playground
AlertDialog has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open AlertDialog in Storybook).
Embed Storybook stories here (4)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Destructive
Consequential
AsyncConfirm
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
The measure now writes the Figma sets drawn under a component's folder as their own entries, so Claude can fix them: popups drawn open (Dialog/Popup, AlertDialog/Popup, Drawer/Popup, Menu/Popup, Popover/Popup, Tooltip/Popup, and Select/Popup or Combobox/Popup, measured open when the stories show them closed) and sets that fix a prop (Pagination/Full, Pagination/Compact, Progress/Linear)
v1.0.0, Nov 11, 2026
- New
Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items)
v1.0.0, Nov 11, 2026