Popup
A popup displays brief content in an overlay.
When to use
- A menu of actions that opens from a button.
- A small amount of content tied to one control, where a modal would be too much.
- Content that should close when people move on to something else.
When not to use
- A decision people must make. A popup closes on a stray click, so important input can be lost.
- Long content or a form of any size. Use a modal or a page.
- A plain label on an icon. Use a tooltip.
- Content that should stay open while people work on something else.
Guidance
Do
Keep a popup to a short list of actions, each one named by what it does.
Don't
Do not let a popup grow into a long list. Group the items into sections, or move less common actions somewhere else people can find them.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| popup | 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.