Modals, Dialogs, and Drawers: When to Use Each

Overlays — modals, dialogs, drawers, sheets, popovers, and toasts — appear on top of the main interface. They're useful for focused tasks and important messages, but they come with a cost: they interrupt. Every time an overlay appears, people have to stop what they were doing, process something new, and then find their way back.

Used well, overlays keep people in context while they complete a small task. Used carelessly, they become a stream of interruptions that people dismiss without reading. This guide explains each type and when to use it.

Modal vs. non-modal#

The first distinction is whether the overlay blocks the rest of the interface:

• Modal overlays block interaction with the page behind them until they're dismissed. The background is usually dimmed.
• Non-modal overlays appear on top of the page but still let people interact with the content behind them.

Modal overlays demand attention. Use them only when the task or message is important enough to justify stopping everything else.

Dialogs#

A dialog is a small modal window asking for a decision or confirmation.

Use dialogs for:

• Confirming destructive or irreversible actions: "Delete this project?"
• Critical information that requires acknowledgment.
• Short decisions that must be made before continuing.

Rules for dialogs:

• Use a clear, specific title, often phrased as a question.
• Explain consequences briefly in the body text.
• Label buttons with specific actions: "Delete project" and "Cancel," not "OK" and "Cancel."
• Keep content short — a dialog isn't the place for long explanations.
• Don't overuse confirmations. If people see one for every action, they start clicking through without reading. Offer undo instead where possible.

Modals for focused tasks#

Larger modals can contain short, self-contained tasks: creating an item, editing details, or completing a small form.

Use modal tasks when:

• The task is short and has a clear end.
• People need the context of the underlying page.
• The task doesn't require navigating elsewhere.

Avoid modals when:

• The task is long or complex, such as multi-page forms.
• People need to reference other information while completing it.
• The content would benefit from its own URL for sharing or bookmarking.

In those cases, a dedicated page is usually better.

Rules for modal tasks:

• Keep a visible title and a clear close action.
• Warn people before discarding unsaved changes.
• Avoid opening a modal from another modal. Nested modals are disorienting.
• Return people to where they were when the modal closes.

Drawers and side panels#

Drawers slide in from the edge of the screen, usually the right on desktop. They're useful for showing details or editing content while keeping the main page visible.

Use drawers for:

• Viewing record details from a list without leaving the list.
• Editing settings or properties in context.
• Filters on smaller screens.
• Secondary navigation.

Rules for drawers:

• Decide whether the drawer is modal (blocking) or non-modal (allowing interaction with the page).
• Make the close action and the drawer's purpose obvious.
• Keep width reasonable; very wide drawers lose the advantage of showing context.
• For list-and-detail patterns, consider whether clicking another list item should update the drawer content.

Bottom sheets#

On mobile, bottom sheets slide up from the bottom of the screen. They're easy to reach with a thumb and feel natural on phones.

Use bottom sheets for:

• Action menus, such as share or more options.
• Short forms and selections.
• Supplementary details.

Rules for bottom sheets:

• Include a visible drag handle if the sheet can be expanded or dismissed by swiping.
• Support both swiping and a tap on the background or a close button to dismiss.
• Avoid sheets that cover the entire screen unless they're intentionally full-height tasks.

Popovers and menus#

Popovers are small, non-modal overlays anchored to the element that triggered them: dropdown menus, date pickers, and contextual options.

Rules for popovers:

• Position them close to the trigger and keep them within the viewport.
• Close them when people click outside or press Escape.
• Keep content brief; complex content belongs in a modal or page.

Tooltips#

Tooltips show short, supplementary information on hover or focus.

Rules for tooltips:

• Use them for brief hints, like labels for icon-only buttons.
• Never put essential information or actions in tooltips; touch users may never see them.
• Make them available on keyboard focus as well as hover.
• Keep them short — usually a few words.

Toasts and snackbars#

Toasts are brief, non-modal messages that appear temporarily to confirm an action or report a status.

Use toasts for:

• Confirming completed actions: "Message sent."
• Offering undo: "Item deleted. Undo."
• Non-critical status updates.

Rules for toasts:

• Keep messages short.
• Display them long enough to read, and longer if they contain an action.
• Don't use toasts for critical errors or information people must act on; they disappear and may be missed.
• Avoid stacking many toasts at once.

Accessibility for overlays#

Overlays are a common source of accessibility issues. Essential rules:

• Move focus into the overlay when it opens, usually to the first interactive element or the title.
• Trap focus inside modal overlays so keyboard users don't tab into the hidden page.
• Return focus to the triggering element when the overlay closes.
• Support the Escape key to close dismissible overlays.
• Label overlays so screen readers announce their purpose.
• Prevent background scrolling behind modal overlays.

Using well-tested components for overlays saves a lot of effort, because getting these behaviors right is surprisingly detailed.

Mobile considerations#

On small screens:

• Large modals often work better as full-screen views or bottom sheets.
• Make close buttons large enough to tap easily.
• Ensure the on-screen keyboard doesn't cover inputs inside overlays.
• Respect the system back gesture as a way to close overlays.

Choosing the right overlay#

• Confirm an important decision: dialog.
• Complete a short, focused task: modal.
• View or edit details while keeping context: drawer or side panel.
• Show options or short content on mobile: bottom sheet.
• Show options anchored to a control: popover or menu.
• Explain a control briefly: tooltip.
• Confirm an action without interrupting: toast.
• Complex or long task: a dedicated page instead of an overlay.

Interrupt with care#

Every overlay asks people to pause. That's appropriate for important decisions and focused tasks, and counterproductive for everything else. Choose the least interruptive pattern that does the job, design clear ways to close and return, and make overlays fully accessible.

When overlays are used sparingly and deliberately, people trust them — and actually read what's inside.