Alert dialog

Component preview

A modal dialog that interrupts a consequential action and requires an explicit confirm or cancel decision.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: confirmation dialog, destructive confirmation, warning dialog

ask before permanently deleting this
a warning box with cancel and delete
make me confirm a dangerous action
stop the flow until I choose
a final check before removing the account
confirm or cancel something irreversible

Try it

Modal surfaces

Compare all three behaviors

Shared comparison scenario: A project item opens a focused overlay while the underlying workspace remains unavailable until the user finishes or closes it.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Alert dialog

An Alert dialog is for a short consequential decision, not a general form and not a media viewer.

Your task

Open the warning, read the named consequence, cancel with the keyboard, then reopen and confirm deliberately.

Edge case to verify

While deletion is submitting, both actions prevent duplicate activation and the dialog reports the pending state.

Mission

Alert dialog

Open the warning, read the named consequence, cancel with the keyboard, then reopen and confirm deliberately.

Primary state: The warning names the workspace, explains permanent loss, and initially focuses the safer Cancel action.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Backdrop

The layer that separates a modal surface from inactive page content.

Use it when

Confirming a permanent deletion
Warning that leaving will discard meaningful unsaved work

Avoid it when

The action can be safely undone
The message only reports a result and needs no decision

Compare similar concepts

Use a Modal dialog for a general contained task; use Alert dialog for a short consequential decision and Lightbox when viewing media is the task.

Modal dialog

Lightbox is a media-specific modal composition; a general Modal dialog handles tasks and an Alert dialog handles a consequential decision.

Lightbox

Technical details

Behaviors

Contain focus
While modal, keyboard focus stays inside the surface until it closes.
Require a decision
The surface remains until the user deliberately confirms or cancels the consequential action.

States

Decision closed with workspace intact
Decision closed with workspace intact
Initial deletion decision open
Initial deletion decision open
Decision closed after cancellation
Decision closed after cancellation
Deletion decision reopened after cancellation
Deletion decision reopened after cancellation
Deletion submitting
Deletion submitting
Decision closed after confirmed deletion
Decision closed after confirmed deletion
Deletion decision reopened after confirmation
Deletion decision reopened after confirmation

State transitions

Decision closed with workspace intact → Initial deletion decision open
Delete workspace opens the warning and initially focuses the safer Keep it action.
Initial deletion decision open → Decision closed after cancellation
Activating Keep it cancels deletion, closes the warning, and allows it to be reopened.
Initial deletion decision open → Decision closed with workspace intact
Escape safely closes the warning before submission and returns focus without recording a confirmed result.
Decision closed after cancellation → Deletion decision reopened after cancellation
Delete workspace reopens the same warning after a prior cancellation.
Deletion decision reopened after cancellation → Decision closed after cancellation
Keep it or Escape closes the reopened warning and preserves the prior cancellation result.
Initial deletion decision open → Deletion submitting
Delete permanently starts the simulated submission while the dialog stays open and both actions become disabled.
Deletion decision reopened after cancellation → Deletion submitting
Delete permanently replaces the prior cancellation result with a new pending submission.
Deletion submitting → Decision closed after confirmed deletion
When the simulated submission finishes, the dialog closes and the confirmed result is announced.
Decision closed after confirmed deletion → Deletion decision reopened after confirmation
Delete workspace can reopen the replayable warning after the demonstration result is confirmed.
Deletion decision reopened after confirmation → Decision closed after confirmed deletion
Escape closes the reopened warning and preserves the prior confirmed demonstration result.
Deletion decision reopened after confirmation → Decision closed after cancellation
Keep it closes the reopened warning and changes the current demonstration result to cancelled.
Deletion decision reopened after confirmation → Deletion submitting
Delete permanently starts another pending demonstration submission from the reopened warning.

Test scenarios

Context: An administrator is about to permanently delete a workspace and all its shared links.
Mission: Open the warning, read the named consequence, cancel with the keyboard, then reopen and confirm deliberately.
Primary state: The warning names the workspace, explains permanent loss, and initially focuses the safer Cancel action.
Edge case: While deletion is submitting, both actions prevent duplicate activation and the dialog reports the pending state.

Accessibility

Role: alertdialog with aria-modal=true
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Initial focus lands on the least destructive useful action unless reading long consequences first is safer.
Dismissal: Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it.
Scroll: Background scrolling is locked while the modal is open. Overflow scrolls inside the surface and the focused control remains visible.
Announcement: The alert dialog role, title, consequence, and both action names are announced when focus enters.
Keyboard: Tab moves only between decision controls
Escape cancels when cancellation remains safe
Enter activates the explicitly focused action

Bindings

AlertDialog.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
alert dialog
radixPrimitive
Alert Dialog
shadcnRecipe
Alert Dialog
runtimeDependency
@radix-ui/react-alert-dialog@1.1.19
packageName
@radix-ui/react-alert-dialog
exportName
AlertDialog.Root
exactVersion
1.1.19
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Alert Dialog is reserved for short consequential decisions and does not make every confirmation flow appropriate.
Verify binding source

Sources

WAI-ARIA APG: Alert and Message Dialogs
W3C WAI · standard · 2026-07-16
Claim covered: Alert dialog: alert dialog semantics, consequential-decision focus placement, and explicit action guidance.
Radix Primitives: Alert Dialog
Radix Primitives · documentation · 2026-07-16
Claim covered: Alert dialog: documented Radix Alert Dialog parts, focus management, cancel action, and modal behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.