Skip to content
Overlays

Drawer

A panel that rises from the bottom with a grab handle.

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from "@flinbu/seed";

Filters

import { Button, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Switch } from "@flinbu/seed";

<Drawer>
  <DrawerTrigger asChild><Button variant="secondary">Filters</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader><DrawerTitle>Filters</DrawerTitle><DrawerDescription>Drag the handle down or press Escape to close.</DrawerDescription></DrawerHeader>
    <Switch label="With a Dark value" defaultChecked />
    <Switch label="Used by components" />
    <DrawerFooter><DrawerClose asChild><Button>Show 148 tokens</Button></DrawerClose></DrawerFooter>
  </DrawerContent>
</Drawer>

Use it for

  • Phones: menus, filters, quick actions.

Use something else for

  • Desktop side panels: use Sheet.

Props

PropTypeDefaultDescription
open / defaultOpen / onOpenChangeboolean–Control it yourself.

Accessibility

  • A Radix Dialog: focus is trapped and Escape closes it. Dragging the handle down is a shortcut, never the only way to close.