use UI

Drawer vs Modal Dialog

Both cover the page, so the choice looks like a matter of taste. It is not. A modal asks a question and refuses to move until it has an answer — everything behind it stops existing, deliberately. A drawer opens a workspace beside what you were doing and expects you to keep referring to it. The tell is whether the content behind still matters: if the user needs to see the list update, compare a value, or check what they were reading, taking it away is the bug.

If the page behind still matters, use a drawer. If it must be forgotten until this is dealt with, use a modal.

Drawer

A panel anchored to one edge of the screen that slides into view over the page, usually without hiding it.

Reach for it when

  • The content is secondary to what is on screen — filters, item details, a settings panel, a cart.
  • The user benefits from seeing the page behind: comparing, referencing, watching a list update as filters change.
  • There is more content than a modal can hold comfortably, and scrolling inside a panel feels natural.
  • You are on mobile and the natural gesture is up from the bottom — bottom sheets read as native there.

Avoid it when

  • The decision is blocking or destructive. A drawer's softer presence undersells “this cannot be undone”.
  • The screen is narrow and the drawer is anchored to the side — it ends up nearly full width, at which point a full page or bottom sheet is clearer.
  • You would open a drawer from a drawer. Nested panels lose the user just as effectively as stacked modals.
  • The content is one short sentence. A popover or tooltip does that without the ceremony.

Modal Dialog

A window layered over the page that blocks interaction with everything behind it until it is dismissed.

Reach for it when

  • A decision genuinely blocks progress — deleting something, discarding unsaved work, confirming a payment.
  • The task is short enough to finish in one go: a few fields, a choice, a confirmation.
  • The content behind would only distract, and losing sight of it costs the user nothing.
  • You need certainty that the user saw it. Nothing else in the interface interrupts this reliably.

Avoid it when

  • The content is long or needs scrolling. A modal that scrolls internally on a small screen is worse than a page.
  • The user needs the page behind for reference — comparing values, copying a name, checking a total. Use a drawer or popover instead.
  • It happens often. An interruption that fires forty times a day stops registering and starts irritating.
  • You are about to open a modal from a modal. Stacked layers destroy any sense of where you are and where back leads.
  • It is only an announcement. A toast or a banner says the same thing without taking the interface hostage.