Geist Design System

Drawer

Display content in a separate view from the existing context.

Default

Only use a Drawer on small viewports. Shown here at any viewport for demonstration.

Custom height

Best Practices

When to use

  • Drawer renders as a bottom sheet on small viewports only. On desktop render Modal (or Sheet for lateral context) directly instead of forcing Drawer.
  • Don’t use Drawer to confirm destructive actions. The lack of a fully blocking dim weakens the severity signal that delete and revoke flows need; route to Modal.
  • A Drawer is good for short focused mobile actions: a single form, a filter sheet, a primary CTA paired with Cancel.

Behavior

  • Tap-outside and swipe-down dismiss by default; preserve both unless the form has dirty input.
  • Use verticalScroll so the drawer body scrolls inside its frame instead of the page behind it.
  • Cap content height with customHeight only when the default height clips the primary action; the action and Cancel must stay above the fold.

Content

  • DrawerTitle is a Title Case statement that names the entity (Deployment Details, Filter Logs).
  • Body is sentence case prose. One primary Verb + Noun button and a literal Cancel; don’t cram a destructive cascade copy into the smaller frame.
  • Don’t restate the page heading as the drawer title; name what this view does.

Accessibility

  • Trap focus inside the drawer while open and return focus to the trigger on close.
  • Escape closes the drawer; honor the system back gesture on mobile so users can dismiss without reaching for the close affordance.
  • Lock body scroll on open and restore it on close so iOS rubber-band scroll doesn’t leak through.