BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Drawer

Stable
Edit in Studio

A sheet that slides in from an edge and keeps the page in view behind it: token details, filters, a review checklist. On touch it can be swiped away.

Updated Oct 16, 2026

Rendered with the real component
Light
Dark

When to use

Use it for

  • Details or editing for one item of a list or table, where the user wants to keep the list in mind.
  • Filters and settings for the current view.
  • side end (default) for details, start for navigation, bottom for small screens and quick choices.

Not for

  • A short task that needs full attention: use Dialog.
  • Content that should stay visible while the user works on the page: use a non-modal side panel in the layout.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Do

Title it with the item's name

"color.signal.default" tells the user which row they opened. The description says what it is for.

Do

Put the actions in the footer

The footer stays visible while the body scrolls.

Don't

A drawer that opens another drawer

Stacked sheets hide where the user came from. Navigate inside the drawer or use a page.

Accessibility

  • Base UI Drawer: modal dialog semantics, named by the title, focus trapped, Escape closes, focus returns to the trigger.
  • Swipe to dismiss is an extra for touch, never the only way: the close button and Escape always work.
  • The page behind is inert while the drawer is open.
  • Slides in 300ms with an exponential ease-out; reduced motion shows it instantly.
  • start and end follow the physical left and right in v1; RTL layouts should pass the mirrored side.

Anatomy and tokens

Read from packages/react/src/components/Drawer/Drawer.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

36 tokens 18 semantic or component, change with theme and brand 1 density, change with comfortable or compact 17 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Drawer/Drawer.tsx, so this table cannot drift from the code.

Prop Type Default Description
open boolean none No description in the code yet.
defaultOpen boolean none No description in the code yet.
onOpenChange (open: boolean) => void none No description in the code yet.
side 'start' | 'end' | 'bottom' 'end' Edge the sheet slides from. `end` (default) for details and filters, `start` for navigation, `bottom` on small screens.
disablePointerDismissal boolean false Keep it open when the scrim is clicked.
children ReactNode none DrawerTrigger and DrawerContent.

Playground

Drawer has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.

Light
Dark

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Drawer in Storybook) .

Embed Storybook stories here (4)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

End

Start

Bottom

AllStates

Changelog

  • New

    Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items). Every popup carries the theme, brand and density scope. Adds menu and drawer component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Token detail drawer outside the explorer (docs-site)

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 16, 2026

All release notes