Drawer

Controlled like Modal, but slides from an edge. size is the width (left/right) or height (top/bottom).


import { Drawer, Button } from '@gg-software/ui';
 
const [open, setOpen] = useState(false);
 
<Drawer
    open={open}
    onClose={() => setOpen(false)}
    placement="right"
    size={360}
    title="Filters"
    footer={<Button variant="primary" onClick={apply}>Apply</Button>}
>
    <FilterForm />
</Drawer>;

Props

Prop	Type	Default	Description
`open`*	`boolean`	—
`onClose`*	`() => void`	—
`title`	`ReactNode`	—
`children`	`ReactNode`	—	content rendered inside the component
`footer`	`ReactNode`	—
`placement`	`"left" \| "right" \| "top" \| "bottom"`	`right`
`size`	`string \| number`	—	width (left/right) or height (top/bottom)
`closeOnBackdrop`	`boolean`	`true`
`showClose`	`boolean`	`true`
`className`	`string`	—

* required · generated from packages/ui/src/containers/Drawer/Drawer.tsx