Drawer

Slide-over panel for secondary flows (settings, details, filters). Built on React Aria Modal with focus trap, Escape, and backdrop dismissal. Control open state with isOpen / onOpenChange. The default export stays the assembled preset (isOpen / title / children). Compound parts (Drawer.Root, Drawer.Backdrop, Drawer.Panel, Drawer.Header, Drawer.Title, Drawer.Close, Drawer.Body) are available for custom chrome. There is no Drawer.Trigger. A Drawer.Close child must forward DOM props (a Button or a host element) — there is no render prop.

State attributes, exit animation, and onOpenChange details are documented in Overlay lifecycle.

Examples

Default

Open from a button; placement defaults to end.

import { Button, Drawer } from '@var-ui/react';

<Button onPress={() => setOpen(true)}>Open drawer</Button>
<Drawer isOpen={open} onOpenChange={setOpen} title="Settings">
  <p>Drawer body content.</p>
</Drawer>

Placement

Use placement (start, end, or bottom) to match the layout edge that owns the flow.

import { Button, Drawer } from '@var-ui/react';
import { useState } from 'react';

const [open, setOpen] = useState(false);

<Button intent="secondary" onPress={() => setOpen(true)}>
  Open from start
</Button>
<Drawer
  isOpen={open}
  onOpenChange={setOpen}
  title="Filters"
  placement="start"
>
  <p>Panel slides in from the start edge.</p>
</Drawer>

Props

Accessibility

Focus moves into the panel when opened and returns to the trigger on close. Provide title or label for an accessible name. The close control defaults to aria-label="Close". Prefer drawers for multi-step or longer secondary UI; use AlertDialog for short confirmations.