Guidelines
When to use
- Mobile and adaptive design: The Drawer is ideal for mobile and responsive layouts, replacing the Openable Overlay found in desktop designs (e.g., Date and Time Pickers).
Use Drawers on mobile designs.
- Contextual actions: When specific actions are related to a particular section of the content, the Drawer provides a non-intrusive way to display them while keeping the user focused.
- Multi-step processes: For workflows or multi-step processes where each step requires additional input or settings, using a Drawer can help keep the user engaged and focused by progressively revealing information.
Drawers can complement flows by progressively revealing information.
When not to use
- Critical information: Do not use a Drawer for urgent messages or essential instructions that must be seen immediately. Use a Banner or Dialog instead.
- Complex or heavy content: If the content to be displayed is too complex or heavy, a Drawer might not be the best choice as it can overwhelm the user when opened. Instead, consider using a modal or a dedicated page for such content.
- Frequent user actions: If the content within the Drawer needs to be accessed frequently, consider integrating it into the main interface to reduce interaction steps.
Don't rely on Drawers to display important information.
Behavior
Interactions
Opening the Drawer
The Drawer opens when a designated trigger (e.g., Button) is tapped, sliding into view from the bottom of the screen.
Closing and navigating
Users can close or navigate the Drawer using:
- Drag Bar: Closes the Drawer by dragging it downward.
- Close Button: Immediately closes the Drawer.
- Back Button: Navigates to the previous page within the Drawer.
- Back and Close Buttons: Both back and close buttons are available for navigation and dismissal.
- No close indicator: Users can manually close the Drawer by dragging it downward.
Layout
Footer
The Drawer footer consists of two slots, typically used for actions like confirming or dismissing. While you can add custom content, we offer pre-filled options to help you create the composition and follow our button order and hierarchy.
Use the footer only when necessary, such as for essential actions to complete a task.
Avoid adding redundant elements, such as combining the cancel Button in the footer with the close Icon Button.
Content
Drawers serve as containers for different types of content. Refer to specific component guidelines (e.g., Date Picker, Range Date Picker, Button, Dialog) to ensure consistency and usability.