Two-pattern comparison · Dialog and side surfaces
Modal Dialog vs Drawer
Separate semantic dialog behavior from edge-based presentation.
Diagnose this choiceFast decision
Start with the behavior that changes the build
Modal Dialog
If users can safely continue working behind it, a non-modal Dialog, Popover, Drawer, or Sheet is more appropriate.
Open field note ↗Drawer
Drawer describes presentation. Specify modality, focus, and dismissal instead of relying on the name.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
The correct name for a floating surface depends on trigger, focus, keyboard support, dismissal, and content type — not the pixel size alone.
| Decision | Modal Dialog | Drawer |
|---|---|---|
| Modality | Modal; content outside is inert and visually obscured. | Can be modal or non-modal; must be declared. |
| Placement | Usually centered or full-screen, independent of an anchor. | Enters from a viewport edge, often bottom on mobile. |
| Focus | Focus enters the dialog, remains within it, and returns to the invoker or a logical successor. | Depends on modality; modal drawers contain focus, non-modal drawers do not. |
| Dismissal | Complete, cancel, explicit close, and usually Escape unless destructive work requires confirmation. | Close action, Escape, outside interaction when allowed, or reverse gesture. |
| Mobile | Use a full-height or full-screen layout when necessary without losing modal semantics. | May support drag, snap points, and larger touch targets. |
When to use each
Choose by the task, not the look
Use a Modal Dialog
Require resolution of a focused task before the page workflow continues. The decisive boundary is: If users can safely continue working behind it, a non-modal Dialog, Popover, Drawer, or Sheet is more appropriate.
Full Modal Dialog referenceUse a Drawer
Expose a task surface from the edge, especially when gesture behavior is useful. The decisive boundary is: Drawer describes presentation. Specify modality, focus, and dismissal instead of relying on the name.
Full Drawer referenceDiscriminating questions
Ask only what changes the result
- Should users be prevented from interacting with the page behind it?Yes / No
- Is entering from a screen edge part of the required interaction?Yes / No
- Is touch dragging or swipe-to-close a core mobile requirement?Yes / No
Frequently asked questions
Modal Dialog vs Drawer: common questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between a Modal Dialog and a Drawer?
If users can safely continue working behind it, a non-modal Dialog, Popover, Drawer, or Sheet is more appropriate. By contrast, A panel that enters from a screen edge, often with touch-friendly drag or snap behavior; modality must be specified separately. The decisive dimensions include modality, placement, focus, and dismissal, mobile.
When should I use a Modal Dialog instead of a Drawer?
Require resolution of a focused task before the page workflow continues. The key check is: If users can safely continue working behind it, a non-modal Dialog, Popover, Drawer, or Sheet is more appropriate, then avoid non-modal surfaces when the background must truly be unavailable..
Can a Modal Dialog and Drawer look the same?
Yes. Visual appearance does not reliably distinguish these patterns. Confirm the trigger, content type, modality, focus behavior, and dismissal rules before choosing. A Drawer used where a Modal Dialog is required can break the interface for keyboard users.