Modal, drawer or full screen
Craft guidanceShortcut editorial, reviewed 9 Oct 2026
Applies to All viewports
Three ways to put something over the page. Choose by how much the person needs to see behind it and how long they will stay.
- Modal
- A short, blocking decision. Confirm, name, choose one thing. The page behind does not matter until it is done.
- Drawer
- Detail or tools beside the page. Filters, a record's details, settings that affect what is behind. The page stays visible and often usable.
- Full screen
- A task in its own right. A long form, a multi-step flow, an editor. On mobile, most things that are modals on desktop.
Why?
Each one makes a different promise. A modal says: deal with this now. A drawer says: this goes with what is behind it. Full screen says: this is the task for a while.
Common mistakes (3)
- A drawer used for a decision that must block.
- A modal used for a ten-field form.
- A different choice for the same job in different parts of one product.
Senior designer note“If people need to look at the page while they do it, it is not a modal.”
No official source Shortcut tracks sets a rule for this. It is a judgement call.