Modal dialog
A modal dialog displays content that requires user interaction 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 page of its own.
- Something with a real consequence, where taking over the screen is proportionate.
When not to use
- Information the reader can act on later. That is a section message or a flag.
- A long form. A modal has no room and no address, so the work cannot be returned to.
- A sequence of modals. If one opens another, the task wanted a page.
- Anything triggered without the reader asking. A modal that appears on its own is an ambush.
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 they are sure about an unnamed thing and answer it with OK. Neither the question nor the button says what will happen.
Intensity
What each of this component's grounds spends, measured 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, and Demanded is declared and rationed, so neither is a property this component carries by itself. 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 escape, so it should never be the prominent one.