Skip to contentWolf-Rayet

Drawer

A drawer is a panel that slides in from the side of the screen.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react
import '@wolf-rayet/react/css/wolf-rayet.css';
import { Drawer, DrawerHeader, DrawerTitle, DrawerBody } from '@wolf-rayet/react';

Drawer props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
isOpen *boolean—Whether the drawer is shown. The open state belongs to you.
onClose *() => void—Called on the close button, on Escape and on a click outside.
children *ReactNode—Header and body, in that order.
width'narrow' | 'medium' | 'wide' | 'full''narrow'Narrow for a detail panel, wider for content that needs room. Full is for a task that has outgrown a panel.
label *string—Names the drawer for assistive technology, usually the same words as the title.

DrawerHeader props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—Header and body, in that order.

DrawerTitle props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—Header and body, in that order.

DrawerBody props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—Header and body, in that order.

Accessibility

What the component does for you, and what it needs from you.

  • The drawer takes focus on open and returns it to whatever opened it on close.
  • Escape closes it, and so does the blanket, both through the same onClose.
  • The label names the drawer, which is what a screen reader announces on entry.
  • Because a drawer has no address, anything inside worth returning to needs a route of its own elsewhere.