Alert dialog

Use an alert dialog when the person must decide before anything else happens and the action cannot be undone: delete, discard, revoke. The title names the action and the description states the consequence. The least destructive button has focus first. For a plain confirmation use ConfirmDialog, which composes it.

Behaviour

Read from the component manifest, so this is the component’s own contract. See Overlays for layers, stacking and dismissal shared by all layers.

AlertDialog

Stage	beta
Keyboard	Tab and Shift+Tab loop inside the dialog Escape cancels Enter or Space presses the focused button
Dismissal	escape: cancels outside press: no close button: optional
Stacking	Opens over a dialog or a drawer (discard, delete); nothing opens over it; an AlertDialog may be a terminal third layer; no other third modal.
Accessibility	role="alertdialog", named by its title and described by the consequence; focus is trapped, the page behind is inert and does not scroll, and focus returns to the trigger on close.
Pattern	APG: alertdialog
Docs	Storybook

AlertDialogContent

Stage	beta
Accessibility	The title names the dialog and the consequence describes it; give the initialFocus prop a ref to the Cancel button (ConfirmDialog does) so the destructive action is never the default.
Docs	Storybook

ConfirmDialog

Stage	beta
Keyboard	Tab and Shift+Tab loop inside the dialog Escape cancels Enter presses the focused button
Dismissal	escape: cancels outside press: no close button: none, Cancel is the way out
Stacking	Opens over a dialog or a drawer; nothing opens over it.
Accessibility	role="alertdialog"; Cancel is focused first; Escape cancels and an outside press does not close it. With confirmName the input is labelled, the name is shown in mono, and the action stays pressable but says why it does nothing yet (aria-disabled and a visible hint), so the reason is read, not guessed.
Pattern	APG: alertdialog
Docs	Storybook