Drawer

 

Overview

Drawers provide a flexible way to display additional information or actions while keeping users focused on the main interface. They are useful for secondary tasks, such as setting details, creating flows, or multi-step forms.

Dialog versus Drawer

While both dialog and drawer are used to present content above the page, they serve different interaction needs.

• Dialog interrupts the flow to focus the user on a single task or decision. It requires explicit dismissal (e.g., confirm, cancel) and is ideal for critical actions or short forms that need immediate attention.
• Drawer slides in from the edge without fully blocking the page. It keeps context visible and suits secondary tasks, multi-step settings, or content that benefits from a wider workspace without breaking the main flow.

 

 

Key Features

• Size Options: Four built-in sizes — sm, md, lg, and full — to support anything from lightweight metadata to full-page workflows
• Dismissibility: Optional close icon for quick user-controlled dismissal.
• Overlay Control: The overlay can be shown or hidden depending on the required level of focus.
• Customisable with Slots: Replace any of the three sections — header, body, footer — with custom layouts.
• Accessibility: Keyboard navigable with proper focus management and screen-reader-friendly semantics.

Anatomy

1. Header:
   Located at the top of the drawer. It typically contains a title and an optional close icon if dismissible is enabled. Users can replace the entire header using the header slot.
2. Body:
   The content area of the drawer. By default, it supports scrollable text and interactive content. Replaceable via the body slot for fully custom layouts.
3. Footer:
   An optional section at the bottom of the drawer is used for actions such as Save, Cancel, or secondary navigation. It can be completely replaced using the footer slot.
4. Close Icon:
   When dismissible is true, a close (“X”) icon appears in the header. This allows users to exit the drawer without taking action.
5. Overlay:
   A semi-transparent background that visually separates the drawer from the underlying UI. The presence of this overlay is controlled by the showOverlay prop.
6. Sizes (sm / md / lg / full):
   These define the drawer’s width (for vertical drawers) or height (for horizontal ones, when supported).
• sm: For quick details or settings.
• md: Balanced layout for forms or contextual data.
• lg: For more complex layouts or multi-step content.
• full: Expands to full viewport height or width, ideal for immersive workflows.

Sizes

These define the drawer’s width (for vertical drawers) or height (for horizontal ones, when supported).

sm: For quick details or settings.

md: Balanced layout for forms or contextual data.

lg: For more complex layouts or multi-step content.

full: Expands to full viewport height or width, ideal for immersive workflows.

Look and Feel

---

Customizable via slots

The drawer component in Figma and code is designed with three customizable slots to ensure flexibility while preserving consistency:

• Header slot: Replace to introduce custom titles, icons, or contextual actions.
• Body slot: Ideal for replacing the default layout with forms, data tables, or advanced information.
• Footer slot: Insert custom action sets, button groups, or navigation options.

When customizing the body, ensure it is configured to support flexible height and scrolling content, depending on your Figma component guidelines.

 

 

---

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.