Overview
A drawer is a panel that slides in from the right side of the screen (not customizable). Because the user can use the Drawer without navigating away from the current page, tasks can be completed more efficiently while not changing page context.
Anatomy
Basic usage
How to use this component
Padding
Ensure consistent 16px padding around the Drawer.
Width
Do not resize the component, keep the drawer at a fixed 432px width (not including overlay shadow).
Drawer vs. Modal
The Drawer and Modal serve similar purposes but differ in use cases:
- Complexity: Drawers handle complex, detailed content, while Modals suit simpler, quick interactions.
- Status and Communication: Drawers relate closely to page content, whereas Modals focus on alerts, confirmations, or warnings.
- Speed and Frequency: Modals are for brief, infrequent tasks; Drawers support more frequent, time-intensive interactions.
- Experience Hierarchy: Modals block progress in the main flow, requiring immediate action, while Drawers branch off to enhance or detail a process without interrupting the flow.
Overlay vs. Inline
The Drawer component is typically overlaid on top of a page and slides in from the side.
However, the Drawer component can also be configured to appear inline. Use the inline prop by turning off the overlay boolean for use cases where the Drawer should be persistent and non-collapsible.
Nested Drawer IA
If your drawer requires users to make a selection that leads to nested information architecture (IA), update the label to a back hyperlink style. This ensures users can easily navigate back to the previous drawer screen.