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.
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
