VOL. III · CH. 3.28 · COMPONENT
Drawers
A modal's gentler cousin — interrupting less while still focusing attention.
1 min read · 133 words
3.28.1Definition & Anatomy
A drawer (or side panel) slides in from an edge of the screen, often leaving the underlying page partially visible or dimmed rather than fully blocked — well suited to medium-length tasks that benefit from context behind them.
3.28.2Common Mistakes
- Using a drawer for a task genuinely requiring full focus-lock, where a modal would be more appropriate.
- No clear dismiss affordance beyond an easily-missed small close icon.
3.28.3Best Practices
- Use a drawer specifically when the underlying page context is useful for the task at hand.
- Support dismiss via overlay click, explicit close button, and Escape key alike.
ExampleDesign tools like Figma use a right-side properties drawer for editing an object's attributes, keeping the canvas visible so the user sees the effect of each change in context.