Behavior comparison
Choose Alert dialog for: Confirming a permanent deletion. Choose Modal dialog for: Editing a compact record without losing page context.
| 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 with aria-modal=true | dialog with 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. |