Modal dialog
A modal dialog shows content that needs a response, in a layer that covers the page.
When to use
- A decision that must be made before anything else continues, such as confirming a deletion.
- A short, focused task that would lose its context on a separate page.
- Something with a real consequence, where it is right to take over the screen.
When not to use
- Information people can act on later. That is a section message or a flag.
- A long form. A modal has little room and no URL, so people cannot come back to the work.
- A sequence of modals. If one modal opens another, use a page instead.
- Anything people did not ask for. A modal that appears on its own interrupts them.
Guidance
Do
Delete this queue?
Its forty conversations move to Unassigned. This cannot be undone.
Ask the question in the title, say the consequence in the body, and name the action on the button.
Don't
Are you sure?
This action cannot be undone.
Do not ask whether people are sure without saying about what, and do not answer with OK. Neither the question nor the button says what will happen.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| modal | surface-overlay | 0.000Substrate | 0.070Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- The title is the question or the task. Delete this queue?, not Confirm.
- The body says the consequence, including anything that cannot be undone.
- Buttons say what they do. Delete queue, not OK.
- Cancel is the way out, so it should never be the most prominent button.