Drawer

Introduction

Drawer is an alternative to a Modal, used to display additional content without fully interrupting the main content. It’s ideal for presenting information such as lists, summaries, filters, or content blocks that don’t require immediate user action.

Variants

1. Right Drawer: A standard right-side drawer without overlay. It receives overlay on smaller screens (smaller than 960px).
2. Right Drawer w/overlay: A drawer that always includes a background overlay, enhancing focus.
3. Bottom Drawer: A drawer that slides up from the bottom of the screen. Typically used for mobile devices or specific content types.

Anatomy

• Header: Title or heading of the drawer.
• Overlay: Force overlay on or off (default on for small screens).
• Position: Slides inn from: default (right) or bottom.
• NoPadding: Remove default padding
• Footer: Optional area for actions like "Save" or "Cancel" buttons.

Usage

A drawer is primarily used to display supplementary content without disrupting the main page flow. If the content requires immediate user action, consider using a Modal instead.

Drawer documentation

For more in-depth guidance on the Drawer component, how to use it, button hierarchy, and related best practices, check out the Overlays documentation.