What it must accomplish
Interrupt only when a decision cannot safely or efficiently remain inline.
Usage
Choose the control by behavior
- A short task must preserve the underlying context
- A consequential action needs focused confirmation
- The user must acknowledge information before continuing
- The content is long or navigational
- The message can appear inline
- The overlay would open another overlay
- The task requires comparison with obscured content
Anatomy
Stable parts create a reliable contract
- 1Accessible title
- 2Optional description
- 3Content region
- 4Primary and secondary actions
- 5Close affordance when dismissal is allowed
- 6Backdrop
Interaction and keyboard behavior
- Move focus into the dialog when it opens
- Keep Tab navigation within a modal dialog
- Escape closes only when dismissal is safe
- Return focus to the logical trigger or next location
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Accessible behavior
- Use the native dialog element or a complete dialog pattern
- Provide a visible title connected to the dialog
- Prevent background interaction for modal content
- Do not make destructive confirmation the initial focus without a strong reason
Responsive considerations
Adapt the decision—not only the dimensions
On small screens, a dialog may become a sheet or full-screen task. Preserve title, actions, scrolling, and safe-area behavior rather than scaling down the desktop box.
Content considerations
Language is part of the component
- Name the decision in the title
- Describe the consequence and affected object
- Use action-specific labels such as Delete project
- Avoid repeating the same message in title and body
Patterns that weaken the experience
Opening dialogs from dialogs
Using a dialog for routine success feedback
Losing the trigger when focus returns
Vague actions such as Yes and No
Comparison
What to study across systems
Apple separates alerts, sheets, popovers, and windows by platform; Material and Fluent distinguish modality and surface behavior; public-service systems often prefer full pages for complex tasks.
Open comparison