Elements06/15
Overlay
G1The one mount above z-float: modal (460/640px) or bare. Focus trap, Esc, scroll lock, stage shadow, scale-in. Overlays never stack two deep.
- Use when
The user must address something before continuing on this surface — a blocking decision.
- Don't use when
Editing an object adjacent to a list (Sheet) or a whole workflow (a route). Modal is the last resort, not the first thought.
- States
- closedopen sm (460px)open lg (640px)barelocked (typed-confirm)
- Keyboard
- Esccloses (unless locked)
- Tabcycles inside the trap
- Acceptance
- Overlays never stack two deep — a modal needing a picker uses an inline combobox.
- Scrim is stage/80 with 2px blur; the panel wears shadow-stage.