Overlays overview
Temporary surfaces that reveal detail without losing the current context.
Design thinking
Temporary surfaces differ by how much attention they require. Tooltips add optional context, popovers support a small local task, menus expose commands, and dialogs or sheets contain decisions that need a focused surface.
Size and spacing
Content-driven surface; action-sized triggers. Triggers follow action sizing. Overlay bodies grow with content inside viewport constraints; scroll the content region instead of clipping rows. Dialogs and sheets start an L1 surface; floating menus and popovers use the shared popover surface and menu insets.
Interaction and motion
The primitive owns focus entry, Escape, outside dismissal and return to the trigger. Enter, exit and disclosure rotation use shared motion tokens; closing content remains mounted for its exit. Reduced motion removes spatial animation without removing content.
Best practices
- Choose the least disruptive surface that fits the task. A tooltip must not contain required actions or replace a visible label.
- Give dialogs a clear title and explicit confirm/cancel actions. Reserve destructive confirmation for a consequential operation.
- Keep portal positioning and focus management in the library. Do not patch them with page-level offsets or timers.
- Test trigger focus restoration, keyboard selection, long menus, viewport edges and nested overlays. Only one hover highlight should move within each list.