Modal vs drawer vs pane

Choose the container based on how much the task interrupts the current workflow and whether people need to keep their current context visible.

If the user needs to…	Choose	Why
Complete a focused, blocking task or confirm a consequential action	Modal	It takes focus and prevents accidental interaction with the page behind it.
Review or edit supporting information without losing the current screen	Pane	It preserves side-by-side context and compresses the main content.
Reveal navigation or secondary controls that do not need a separate work area	Drawer	It provides temporary access without turning the task into a blocking dialog.

Use a modal

Use a modal for short form tasks, focused creation or editing, and destructive confirmation. It must have a clear title, an explicit exit, focus management, and one primary action. Do not open a modal from another modal; move the user to a dedicated screen when the task becomes complex.

Use a pane

Use a pane when the user needs a tool or details alongside the screen they are working in. Panes are appropriate for contextual detail, client chat, tasks, and reference tools. Keep the main content usable as the pane opens; do not use a pane when the task needs full attention or a full-width canvas.

Use a drawer

Use a drawer for supplementary navigation or lightweight controls. Keep it dismissible and avoid putting a multi-step or high-consequence form inside it. If its contents require users to compare with, edit, or retain a working context, choose a pane instead.

Quick check

Before choosing, ask: “Can the user safely continue interacting with the page?” If no, use a modal. If yes and the user needs to work side by side, use a pane. If they only need temporary access to secondary controls, use a drawer.