modal-and-overlay-patterns
Installation
SKILL.md
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 |