Drawer
Modal panel anchored to a viewport edge.
Add it to your project
Eject the complete drawer group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject drawerbash
npx toucan eject drawerapp.tsx
import { Drawer } from '@/components/toucan/drawer';Use when
Supporting content or a task should slide in without replacing the route.
Avoid when
The content is a small contextual menu or non-modal hint.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Drawer
Drawer
Props type: DrawerProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
anchor | "left" | "right" | "top" | "bottom" | 'right' | No | The edge or alignment used to position the floating content. |
closeOnBackdropClick | boolean | true | No | Close when the user activates the backdrop. |
closeOnEscape | boolean | true | No | Close when the user presses Escape. |
onClose | () => void | — | Required | Called when the component requests to close. |
open | boolean | — | Required | Controlled open state. |
size | "sm" | "md" | "lg" | 'md' | No | Visual size variant. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
DrawerProps
Accessibility
- Uses dialog semantics, focus trapping, Escape dismissal, and focus restoration.
- Provide an accessible name.
Token families
drawerbackdropfocus