Drawer

Status: Experimental

Drawer uses native modal dialog behavior while attaching its square surface to the left or right viewport edge. It is appropriate for contextual detail, compact 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.

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.
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.