Drawer
A side panel for navigation or detail, with a scrim.
In context
Projects
Queue edits while offline and replay them when the crew is back in range.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
trigger | ReactNode | No | — |
title | ReactNode | No | — |
description | ReactNode | No | — |
footer | ReactNode | No | — |
className | string | undefined | No | — |
side | DrawerSide | undefined | No | — |
size | number | "auto" | undefined | No | — |
maxHeight | string | number | undefined | No | — |
dismissible | boolean | undefined | No | — |
container | HTMLElement | null | undefined | No | — |
appearance | "default" | "popup" | undefined | No | — |
showHandle | boolean | undefined | No | — |
titleStyle | "eyebrow" | "heading" | undefined | No | — |
Accessibility
Built on the same Radix Dialog primitive as Dialog: role="dialog" with aria-modal="true", focus trapped inside the panel while open, Esc and a backdrop click close it. A visible close button is always rendered, never gesture-only dismissal.
data-rebar-* attributes
data-rebar-component="drawer" on the panel; data-rebar-side mirrors side; data-rebar-part="header"|"title"|"description"|"body"|"footer"|"close". Radix's own data-state="open"|"closed" is read directly.
Migrating to Ant Design
AntD's own Drawer is a close match: open, title and footer keep their names, side maps to placement. onOpenChange is renamed to onClose and flagged, since AntD's onClose takes an event, not a boolean.