Key insights
- Start with one question: does it block the user? If yes, reach for a modal; if no, choose by context — sheet, popover, or drawer.
- A modal takes over the screen with a full scrim and centers a single decision. Reserve it for critical or destructive choices (like "Delete account?") that must be answered before anything else.
- A bottom sheet is the mobile-first default: it slides up from the bottom edge, supports a drag handle and snap points, and keeps the screen behind it partly visible so users don't lose context.
- A drawer is an edge-anchored panel for navigation — it slides in from the side, dims only the area it covers, and leaves the app alive behind it.
- A popover anchors to the element that triggered it and stays small and contextual (~200px). Use it for lightweight menus and quick actions, never for blocking flows.
- Match weight to intent: modals interrupt, popovers and sheets stay non-blocking. Reaching for a modal when a popover would do adds friction to routine actions.
Do / Don't
- Do: Ask "does this block the user?" before picking any overlay.
- Do: Reserve modals for critical or destructive decisions that demand a response.
- Do: Anchor popovers to their trigger and keep them small and contextual.
- Don't: Reach for a modal when a lightweight sheet or popover would do the job.
- Don't: Use a full-screen scrim for a routine, non-blocking action.
- Don't: Bury navigation inside a blocking overlay — use an edge drawer instead.
