modal-and-overlay-patterns

# Modal and Overlay Patterns Overlays appear above the main content layer. They range from lightweight popovers (non-blocking, anchored to a trigger) to full blocking modals (require a user response before the app continues). Choosing the right overlay type for the task prevents unnecessary interruption and keeps the user oriented. --- ## The Overlay Hierarchy Choose the lightest type that satisfies the task. Heavier overlays carry higher cognitive cost. | Type | Blocks background | Anchored to trigger | Typical content | Dismiss with | |---|---|---|---|---| | **Tooltip** | No | Yes | 1–2 lines of explanatory text | Cursor leave / focus out | | **Popover** | No | Yes | Short interactive content: a form field, a picker, a small list | Click outside, Escape, explicit close | | **Dropdown / Menu** | No | Yes | List of actions or options | Click outside, Escape, selection | | **Bottom sheet** (mobile) | Partial (dimmed) | No | Actions or content on small screens | Swipe down, tap scrim, Escape | | **Drawer / Side panel** | Partial (dimmed) | No | Secondary editing, detail views, long forms | Escape, explicit close; optionally click scrim | | **Dialog / Modal** | Yes (full scrim) | No | Blocking task: confirm action, fill required form | Escape (non-destructive only), explicit button | | **Full-screen overlay** | Yes (complete) | No | Immersive task: media viewer, complex configuration | Explicit close only | **Decision rule:** If the user can continue using the rest of the ...