Drawer

import { Drawer } from 'yarcl';

<Drawer side="left" trigger={<Button>Menu</Button>} title="Navigation">
  <Stack as="nav">…</Stack>
</Drawer>

<Drawer trigger={<Button>Filters</Button>} title="Filters" footer={<Button>Apply</Button>}>
  …
</Drawer>

Same behavior as Dialog. The drawer fills the screen height; its body scrolls while the header and footer stay in place.

Sizes

size sets the width, from the same modalSizes as dialogs. Drawers are usually narrower than dialogs, so the library defaults set a component default:

components: { Drawer: { size: 'sm' } }

<Drawer size="lg" title="Order details">…</Drawer>

Props

Prop	Type	Default	Description
`title` required	`ReactNode`		Heading of the dialog. Also its accessible name.
`children`	`ReactNode`		Body content. Scrolls when it doesn't fit.
`closeOnBackdrop`	`boolean`	`true`	Closes when the backdrop is clicked.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`description`	`ReactNode`		Supporting text below the title. Also its accessible description.
`footer`	`ReactNode`		Actions shown at the bottom, e.g. Cancel and Confirm buttons.
`onOpenChange`	`(open: boolean) => void`		Called when the dialog opens or closes, including by Esc, the close button or a backdrop click.
`open`	`boolean`		Controlled open state.
`side`	`'right' \| 'left'`	`'right'`	Edge the drawer is attached to.
`size`	`ModalSize`config	config.defaults.modalSize (Drawer: its component default, `sm` in the library defaults)	Width, from the `modalSizes` config. Height follows the content, up to the viewport.
`trigger`	`ReactElement<{ onClick?: (event: MouseEvent) => void }, string \| JSXElementConstructor<any>>`		An element that opens the dialog when clicked, e.g. a Button. Optional when controlled.