Drawer
Slide-out panel from any edge. Focus trap, scroll lock, and backdrop. Uses the dialog machine internally.
Example
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | Required | Controls drawer visibility |
onClose | () => void | — | Required | Called when drawer should close |
anchor | 'left' | 'right' | 'top' | 'bottom' | 'right' | No | Edge the drawer slides from |
size | 'sm' | 'md' | 'lg' | 'md' | No | Width (horizontal anchors) or height (vertical anchors) |
closeOnEscape | boolean | true | No | Close when pressing Escape |
closeOnBackdropClick | boolean | true | No | Close when clicking backdrop |
Accessibility
- role="dialog" with aria-modal="true"
- Focus trap keeps focus within drawer
- Body scroll lock while open
- Returns focus to trigger on close
- Renders via portal with sibling backdrop
Related Tokens
--drawer-backdrop--drawer-surface--drawer-shadow--drawer-width--drawer-height