Drawer
A slide-in panel that enters from any edge of the viewport. The triggerLabel prop renders a built-in trigger button. Clicking the overlay or pressing Escape closes the drawer.
Positions
Left Drawer
Slides in from the left edge.
Right Drawer
Slides in from the right edge.
Top Drawer
Slides in from the top.
Bottom Drawer
Slides in from the bottom.
import { Drawer } from '@davaux/ui'
<Drawer triggerLabel="Left" title="Left Drawer" position="left" body="..." />
<Drawer triggerLabel="Right" title="Right Drawer" position="right" body="..." />
<Drawer triggerLabel="Top" title="Top Drawer" position="top" body="..." />
<Drawer triggerLabel="Bottom" title="Bottom Drawer" position="bottom" body="..." />Sizes
Drawer — size="xs"
Drawer body content.
Drawer — size="sm"
Drawer body content.
Drawer — size="md"
Drawer body content.
Drawer — size="lg"
Drawer body content.
Drawer — size="xl"
Drawer body content.
<Drawer triggerLabel="Small" size="sm" title="Small drawer" body="..." />
<Drawer triggerLabel="Medium" size="md" title="Medium drawer" body="..." />
<Drawer triggerLabel="Large" size="lg" title="Large drawer" body="..." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
opened | boolean | false | Initial open state (SSR) |
title | string | — | Drawer header title |
body | string | '' | Drawer body text |
triggerLabel | string | — | Renders a built-in trigger button |
position | 'left'|'right'|'top'|'bottom' | 'left' | Edge the drawer slides in from |
size | 'xs'|'sm'|'md'|'lg'|'xl'|'full' | 'md' | Width (or height for top/bottom) of the drawer |