Skip to content
CFA Design System

Drawer

ReactProps
Github icon-storybook-square Storybook Markdown Copy for LLM

An overlay component that can be attached to the left or right side of the screen. Use drawers for longer side tasks such as forms while keeping page context available.

Import

import { Drawer } from "@cfa/react-core";

Live Editor

Guidelines

When to use

  • Drawer is for ancillary tasks on the current page, such as filters, detail panels, or short forms, without navigating away.

Do

  • Default to right-side entry. Use left when the related content sits on the left side of the page.
  • Use Confirm + Cancel or Destructive + Cancel in the footer when the drawer includes actions. Follow Button guidance for labels.
  • Include a close control. Allow backdrop and Esc dismiss only when backing out will not lose data or interrupt a required flow.

Avoid

  • Nesting Drawers or opening a Modal from a Drawer.
  • Using Drawer for status or feedback. Use Toast, BannerMessage, or MessageBlock.
  • Using Drawer for a blocking decision people must acknowledge before continuing. Use Modal.

Examples

Composition

Compose Drawer.Title, Drawer.Content, and Drawer.Footer as direct children of Drawer.Tray:

  • Drawer.Title — drawer title and accessible name
  • Drawer.Content — scrollable body content
  • Drawer.Footer — action buttons; stays visible when it is a direct child of Drawer.Tray
  • Drawer.CloseButton — pre-styled cancel/dismiss button

Drawer.Tray applies layout padding and section spacing. Drawer.Content styles the scrollable body region only. Do not nest Drawer.Title or Drawer.Footer inside Drawer.Content.

Use a drawer for forms and longer side tasks. Use a modal for short blocking confirmations instead.

Form task

Place the form in Drawer.Content and submit actions in Drawer.Footer.

Controlled Drawer

Control the open state from the parent component with isOpen and onOpenChange.

Dismissable Drawer

Allow closing by clicking outside the drawer or pressing ESC. When using Drawer.Overlay, pass isDismissable to Overlay instead of Tray.

Hide close icon

Hide the top close icon when actions in Drawer.Footer should be the primary way to dismiss the drawer.

Custom Overlay

Drawer.Overlay is optional — use it only to customize the backdrop (for example, background color or className). For stacking conflicts, add isolation: isolate to your app wrapper instead of setting z-index on the overlay. When using a custom Overlay tree, pass isDismissable and isKeyboardDismissDisabled to Overlay, not Tray.

Size and position

Prefer the size and position props over custom width styles.

Custom Styling

Use CSS classes or inline styles only when the built-in size options are not enough.