Drawer

Status: Experimental

Drawer uses native modal dialog behavior while attaching its square surface to the left or right viewport edge. It slides from its configured edge, completes its exit before restoring page interaction, and is appropriate for contextual detail, task panels, and mobile navigation.

Preview

Usage

<Drawer title="Customer details" side="right" size="md">
  <Button slot="trigger">View details</Button>
  <p>Contextual customer information.</p>
  <Button slot="footer" data-frasto-drawer-close>Done</Button>
</Drawer>

API

Prop	Type	Default	Purpose
`title`	`string`	required	visible and accessible drawer title
`description`	`string`	—	visible supporting context
`side`	`'left' \| 'right'`	`'right'`	attached viewport edge
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	panel width
`dismissible`	`boolean`	`true`	permits Escape and backdrop dismissal
`closeLabel`	`string`	`'Close drawer'`	close-control accessible name
`class`, `dialogClass`, `panelClass`	`string`	—	composition styling hooks

Slots are trigger, default content, and footer. Add data-frasto-drawer-close to a footer control that closes the drawer.

The size scale is 24rem, 32rem, and 40rem. All regions use 24px interior padding, while the panel remains contained within narrow viewports.

Accessibility and responsive behavior

Drawer traps focus through native modal dialog behavior and returns focus on close.
The trigger relationship and expanded state are managed automatically.
On narrow screens, every size remains within a 24px viewport remainder.
Content scrolls inside the panel while its heading and optional footer remain visible.
Opening and closing motion follows the selected side and is removed for reduced-motion users.
Use Dialog for centered decisions and Popover for non-modal context.

Required completion

Set dismissible={false} only when users must make an explicit choice. Escape and backdrop interaction will not close the drawer, so the content must provide a clearly labelled close or completion control.