Modal dialogs
Interruption is a cost. Spend it only on decisions that block the flow.
States
closedopeningopenbusyerrorclosing
Do / Don't
Do
- Reserve modals for decisions that must be made before continuing
- Trap focus inside while open and return it to the trigger on close
- Label buttons with the action ("Delete file"), not "Yes"/"OK"
- Close on Escape, and on backdrop click for non-destructive dialogs
Don't
- Use a modal for information that could be inline or a toast
- Stack modals on top of modals
- Auto-open modals on page load for marketing
When to use
Confirmation of destructive actions, required decisions mid-task, and short focused sub-tasks (rename, share). If the content deserves a URL or exceeds a couple of paragraphs, it deserves a page, sheet or drawer instead.
Accessibility
role="dialog" with aria-modal="true", labelled by its title; focus moves to the dialog on open, is trapped inside (see focus trap), and returns to the invoking element on close. Background content is inert.
Platform notes
iOS distinguishes sheets (dismissible context switches) from alerts (blocking decisions); Material similarly separates dialogs from bottom sheets. Matching the platform’s modality vocabulary matters more than visual styling.
Evidence
- NN/g, “Modal & Nonmodal Dialogs” — modality is justified by required decisions, and overuse trains users to dismiss without reading.