Drawer

A panel that slides in from the side of the screen for a task or details, without leaving the page: a title, a description, content, then the actions.

Usage

Import the component and render it.

import { Drawer } from 'src/components/Drawer/Drawer';
import { Button } from 'src/components/Button/Button';

<Drawer
  placement="left"
  size="sm"
  title="Drawer title"
  description="Add supporting information to help people complete this task."
  primaryAction="Continue"
  secondaryAction="Cancel"
  dismissible
  trigger={<Button variant="outline" size="sm">Open drawer</Button>}
/>

Accessibility

Role: dialog, named by the title and described by the description; modal with showModal().

Key	Action
`Tab / Shift+Tab`	Moves through the drawer’s controls only (the page behind is inert)
`Escape`	Closes the drawer
`Enter / Space`	Activates the focused Button

Opening moves focus into the drawer; closing returns it to the trigger.
A click outside the panel closes it.
It slides in and out (250ms / 200ms); with reduced motion it appears and disappears at once.

Size

Set the size prop: Small is "sm", Large is "lg".

Small

Large

<Drawer size="sm" title="Drawer title" />
<Drawer size="lg" title="Drawer title" />

Placement

Set the placement prop: Left is "left", Right is "right".

Left

Right

<Drawer placement="left" title="Drawer title" />
<Drawer placement="right" title="Drawer title" />

Composition

Use the following composition to build a Drawer:

Drawer
├── Button
└── Separator

Used in

Drawer is part of NavigationBar.

Actions

Pass callbacks to respond to the component.

import { Drawer } from 'src/components/Drawer/Drawer';
import { Button } from 'src/components/Button/Button';

<Drawer
  placement="left"
  size="sm"
  title="Drawer title"
  description="Add supporting information to help people complete this task."
  primaryAction="Continue"
  secondaryAction="Cancel"
  dismissible
  trigger={<Button variant="outline" size="sm">Open drawer</Button>}
  onPrimaryAction={() => console.log('onPrimaryAction')}
  onSecondaryAction={() => console.log('onSecondaryAction')}
  onOpenChange={(open) => console.log(open)}
/>

Callback	When
`onPrimaryAction`	Called when the primary action is activated.
`onSecondaryAction`	Called when the secondary action is activated.
`onOpenChange`	Called when the drawer opens or closes (trigger, actions, Close, Esc, backdrop).