The Overlay Family: More Than Just Modals
When a UI interaction demands temporary content that appears above the main page, you have several design patterns to choose from. Each serves a distinct purpose, and using the wrong one creates friction. Here's a clear breakdown of the three most common overlay patterns: modal dialogs, side drawers, and bottom sheets.
Modal Dialogs
A modal is a centered, floating dialog that blocks interaction with the rest of the page until dismissed. It demands the user's attention and is the most interruptive of the three patterns.
Best used for:
- Confirming or cancelling a destructive action (e.g., "Delete this item?")
- Capturing required input before proceeding (e.g., login, form submission)
- Displaying critical alerts or error messages
- Showing a focused piece of content like an image or video
Avoid when:
- The content is lengthy or requires extensive scrolling
- The user needs to reference background content while interacting
- The interaction is low-stakes and doesn't warrant interruption
Side Drawers (Sidebars)
A drawer slides in from the left or right edge of the screen, partially or fully covering the page. Unlike a modal, it can coexist visually with the background, especially in a "push" configuration where the main content shifts sideways.
Best used for:
- Navigation menus on mobile and tablet viewports
- Filters and settings panels where users need to interact iteratively
- Detail panels in list/detail layouts (e.g., email clients, file managers)
- Shopping carts or order summaries that persist alongside browsing
Avoid when:
- The interaction is a one-time confirmation — a modal is less disruptive
- Screen real estate is extremely limited and the drawer would obscure critical content
Bottom Sheets
A bottom sheet slides up from the bottom of the screen and is predominantly a mobile pattern, heavily used in native Android and iOS apps. On the web, it's increasingly common in mobile-first designs.
Best used for:
- Action menus with multiple options (share, edit, delete)
- Contextual controls that relate to a selected item
- Partial disclosure of content that the user can expand further
- Mobile-friendly alternatives to dropdowns and context menus
Avoid when:
- The viewport is predominantly desktop — bottom sheets feel out of place
- The content requires a title, heading, or complex structure — a modal is clearer
Side-by-Side Comparison
| Attribute | Modal Dialog | Side Drawer | Bottom Sheet |
|---|---|---|---|
| Position | Centered, floating | Left or right edge | Bottom edge |
| Interruption level | High (blocks page) | Medium | Medium–Low |
| Best viewport | All | All (great on mobile nav) | Mobile-first |
| Content capacity | Limited | High (scrollable) | Medium (expandable) |
| Use case fit | Confirmations, alerts | Navigation, filters | Action menus, quick picks |
A Decision Framework
- Does the user need to make a decision before continuing? → Modal dialog.
- Does the user need persistent access to settings or navigation? → Side drawer.
- Is this a mobile action menu or expandable detail? → Bottom sheet.
- Is the user on desktop with plenty of screen space? → Consider a modal or inline panel instead of a sheet.
Choosing the right overlay pattern isn't just aesthetic — it directly impacts task completion rates and user satisfaction. Match the pattern to the user's context and intent, not just what looks visually interesting.