Components / overlays
Drawer
Panel that slides in from the left or right edge for secondary tasks (filters, details, settings) without leaving the page.
import { Drawer } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Drawer } from '@basiiik/ui';
<Drawer title="Filters" open={open} onOpenChange={setOpen}>Filter controls</Drawer>- Example values were filled in for the required props title, open, onOpenChange: replace them with your own.
- Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
- Controlled with
openandonOpenChange. Built on the native <dialog> like Modal.sidechooses the edge it slides from (left for navigation, right for detail). - Compose with: button, icon-button.
- Storybook: Overlays/Drawer.
Props
| Prop | Type | Notes |
|---|---|---|
side | "left" | "right" | Default "right" |
size | "sm" | "md" | "lg" | Default "md" |
title required | ReactNode | |
showClose | boolean | |
footer | ReactNode | |
open required | boolean | |
onOpenChange required | (open: boolean) => void | |
children | ReactNode |
Other props
| Prop | Type | What it does |
|---|---|---|
closeLabel | string | |
closeOnBackdropClick | boolean | |
className | string |
States. Controlled with open and onOpenChange. Built on the native <dialog> like Modal. side chooses the edge it slides from (left for navigation, right for detail).
Use it when
- Secondary tasks: filters, details, settings
Do not use it when
- Short blocking decisions (use Modal)
Rules for agents
- Give every Drawer a title; it is the accessible name
- Use side="left" for navigation and side="right" for contextual detail, filters or settings
- Put actions such as Apply and Cancel in footer so they stay visible while the content scrolls
- Control it with open and onOpenChange, and open it only in response to a user action
Avoid
- A Drawer for a short yes/no decision (use Modal)
- Stacking a Drawer on top of another Drawer or a Modal
- Putting the main content of the page in a Drawer
- Applying filters on every change and also showing an Apply button
Writing the content
- Titles name the panel: 'Filters', 'Order details'
- Footer actions use specific verbs: 'Apply filters', 'Save settings'
- Use sentence case
Keyboard
- Escape closes
- Focus is trapped while open and returned on close
Accessibility
- aria-modal="true" when it blocks the page
- aria-labelledby the title
Colour tokens it reads
color.bg.brand.defaultcolor.bg.brand.subtlecolor.bg.surfacecolor.border.subtlecolor.text.brandcolor.text.on-brandcolor.text.primarycolor.text.secondaryRelated
overlays 6 Figma variants Try it in the live demo