Drawer
The drawer slides in from left, right, or bottom over the page. Use
Pass main content as children. Configure actions with buttonGroup, which forwards directly to the ButtonGroup component (primaryButton, secondaryButton, tertiaryButton, type, and layout). Each button object uses text for the visible caption. Button size is responsive — the drawer auto-switches to size="sm" on viewports narrower than 768px.
Pass main content in the default slot. Configure actions with buttonGroup (same shape as ButtonGroup: use text on each action object). Bind open state with v-model:open or :open + @update:open.
Loading Code Block...Basic example
Section titled “Basic example”A minimal drawer: trigger button, controlled open state, and body content only (no header or footer). The drawer renders into a portal and opens over the entire document.
Loading Code Block...Use side="left", side="right", or side="bottom". Use the dropdown in the interactive demo to cycle placements; the snippet below fixes right.
Loading Code Block...Scrollable body
Section titled “Scrollable body”When header includes a title, the header stays fixed, the default slot / children scrolls, and an optional footer stays pinned to the bottom.
Loading Code Block...Footer actions
Section titled “Footer actions”Use buttonGroup in both frameworks. The shape mirrors ButtonGroup (primaryButton, secondaryButton, tertiaryButton, type, layout), and each button object uses text for its caption. Tertiary actions are rendered when type: 'link'. Button size is mapped automatically (sm below the md breakpoint, otherwise md) in both frameworks.
Loading Code Block...Accessibility
Section titled “Accessibility”- When the drawer opens, focus should move into the panel; restore focus to the trigger on close (your app or dialog primitive typically handles this).
- Provide a clear
titleinheaderwhen the drawer represents a distinct task or page fragment. - For
side="bottom"drawers, treat them like mobile sheets: keep primary actions reachable and avoid trapping keyboard users without an explicit close control (showClose).
Emits: update:open — sync open state; click:leadingIcon — header leading control activated (listen with @click:leadingIcon).