Behavior comparison
Alert dialog vs Modal dialog
Decisive difference
Alert dialog interrupts for one decision to confirm or cancel; Modal dialog hosts a broader contained task such as a form.
Choice criteria, links and sources
- Alert dialogChoose Alert dialog if the user must confirm or cancel a consequential action, with no other input.Open entry Alert dialog
- Modal dialogChoose Modal dialog if the task needs several fields or steps while the page stays in the background.Open entry Modal dialog
See the nine dimensionsSee the sources
Modal surfaces
Try it
Is the task about acting, confirming a consequential decision, or viewing media?
Alert dialog
Shared trial context
A project item opens a focused overlay while the underlying workspace remains unavailable until the user finishes or closes it.
Alert dialog
Mission
Alert dialog
Open the warning, read the named consequence, cancel with the keyboard, then reopen and confirm deliberately.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The warning names the workspace, explains permanent loss, and initially focuses the safer Keep it action.
- Edge case
- While deletion is submitting, both actions prevent duplicate activation and the dialog reports the pending state.
Modal dialog
Mission
Modal dialog
Open the dialog, tab through every control, cancel with Escape, and verify focus returns to Edit member.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The edit form opens with its title announced and focus on the first useful field.
- Edge case
- A validation error keeps the dialog open, links the message to the invalid field, and moves focus only when submission fails.
What this example shows
An Alert dialog is for a short consequential decision, not a general form and not a media viewer.
Which fits your need?
Alert dialog
Confirming a permanent deletion
Modal dialog
Editing a compact record without losing page context
Difference and sources
An Alert dialog is for a short consequential decision, not a general form and not a media viewer.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Backdrop
The layer that separates a modal surface from inactive page content.
Decision
Family question
Is the task about acting, confirming a consequential decision, or viewing media?
Three criteria to choose
- Use case
Alert dialog
Confirming a permanent deletion
Modal dialog
Editing a compact record without losing page context
- Focus
Alert dialog
Initial focus lands on the least destructive useful action unless reading long consequences first is safer.
Modal dialog
Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener.
- Dismissal
Alert dialog
Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it.
Modal dialog
Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless.
Nine dimensions
- Trigger
Alert dialog
A consequential action reaches the point where explicit confirmation is required.
Modal dialog
An explicit action starts a short, contained task.
- Modality
Alert dialog
Strictly modal; no background interaction is available before a decision.
Modal dialog
Modal; the rest of the page becomes inert until the task is closed.
- Placement
Alert dialog
A compact, prominent viewport surface close to the current decision context.
Modal dialog
A viewport surface, commonly centered, with internal scrolling when needed.
- Interactivity
Alert dialog
Offers explicit confirm and cancel decisions; it does not vanish on a timer or casual outside press.
Modal dialog
Supports a focused set of form controls and actions inside a contained focus scope.
- Focus
Alert dialog
Initial focus lands on the least destructive useful action unless reading long consequences first is safer.
Modal dialog
Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener.
- Dismissal
Alert dialog
Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it.
Modal dialog
Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless.
- Accessible role
Alert dialog
alertdialog[aria-modal=true]
Modal dialog
dialog[aria-modal=true]
- Use case
Alert dialog
Confirming a permanent deletion
Modal dialog
Editing a compact record without losing page context
- Mobile behavior
Alert dialog
Keep the consequence readable and separate destructive and safe actions into large targets.
Modal dialog
Use most of the available width, preserve safe areas, and keep focused fields above the keyboard.
| Dimension | Alert dialogAlert dialog | Modal dialogModal dialog |
|---|---|---|
| Trigger | A consequential action reaches the point where explicit confirmation is required. | An explicit action starts a short, contained task. |
| Modality | Strictly modal; no background interaction is available before a decision. | Modal; the rest of the page becomes inert until the task is closed. |
| Placement | A compact, prominent viewport surface close to the current decision context. | A viewport surface, commonly centered, with internal scrolling when needed. |
| Interactivity | Offers explicit confirm and cancel decisions; it does not vanish on a timer or casual outside press. | Supports a focused set of form controls and actions inside a contained focus scope. |
| Focus | Initial focus lands on the least destructive useful action unless reading long consequences first is safer. | Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener. |
| Dismissal | Only an explicit decision or a documented safe cancellation closes the alert; no timer or accidental outside press dismisses it. | Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless. |
| Accessible role | alertdialog[aria-modal=true] | dialog[aria-modal=true] |
| Use case | Confirming a permanent deletion | Editing a compact record without losing page context |
| Mobile behavior | Keep the consequence readable and separate destructive and safe actions into large targets. | Use most of the available width, preserve safe areas, and keep focused fields above the keyboard. |