Popup
A popup displays brief content in an overlay.
When to use
- A menu of actions hanging off a button.
- A small amount of content tied to one control, where a modal would be too much.
- Anything that should close when the reader looks elsewhere.
When not to use
- A decision that must be made. A popup closes on a stray click, so anything important can be lost.
- Long content or a form of any size. That is a modal or a page.
- A plain label on an icon. That is a tooltip.
- Content that should stay open while the reader works elsewhere.
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 become a list to search through. Group it into sections, or move the rarer actions somewhere they can be found.
Intensity
What each of this component's grounds spends, measured 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, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.