Components

AlertDialog

A modal window that interrupts a task to ask one question, to confirm or cancel.

Storybook: Storybook
Source: Source

Role and semantics

AlertDialog carries role="alertdialog" and aria-modal="true" through Base UI AlertDialog. The title is linked as its name and the description as its description. While busy the panel has aria-busy="true" and the status region on the confirm button reads “Loading” once.

Keyboard

Key	Behaviour
Tab / Shift+Tab	Moves between cancel and confirm.
Enter / Space	Runs the focused action.
Escape	Cancels; ignored while the action runs.

Focus

On open, focus moves to cancel (the least destructive action).
On close, focus returns to the trigger.
While the action runs, focus stays on the confirm button, which stays focusable.

Example	Output
Opening	“Delete item?, alert dialog, This cannot be undone.”
Focus	“Cancel, button”
Busy	“Loading”

Contrast

color-action-on-danger-default text on the danger fill reaches at least 4.5:1. The destructive meaning is carried by the verb in the confirm label, not only by colour.

WCAG 2.2

Criterion	How AlertDialog meets it	What product teams do
1.4.1 Use of colour	Danger is also stated by the verb in the label.	Write the confirm label as a verb.
3.3.4 Error prevention	An irreversible action needs an explicit confirmation.	Confirm destructive actions with this dialog.
2.4.3 Focus order	Focus starts on the least destructive action.	Do not move initial focus.
4.1.3 Status messages	The busy state is announced once.	Show the error in the body with `role="alert"`.