ACTIONS & SURFACES

Drawer

Sliding side panel built on the Radix Dialog primitive. Comes in four sides (left, right, top, bottom), with a close button baked in and the same Memphis shadow chrome as Dialog.

Import

1import {
2  Drawer,
3  DrawerTrigger,
4  DrawerContent,
5  DrawerHeader,
6  DrawerBody,
7  DrawerFooter,
8  DrawerTitle,
9  DrawerDescription,
10  DrawerClose,
11} from 'damo-ui'

Live example

1<Drawer>
2  <DrawerTrigger asChild>
3    <Button variant="primary">Open drawer</Button>
4  </DrawerTrigger>
5  <DrawerContent side="right">
6    <DrawerHeader>
7      <DrawerTitle>Filtri</DrawerTitle>
8      <DrawerDescription>Affina la lista applicando i filtri qui sotto.</DrawerDescription>
9    </DrawerHeader>
10    <DrawerBody>
11      {/* form fields, lists, …  */}
12    </DrawerBody>
13    <DrawerFooter>
14      <DrawerClose asChild>
15        <Button variant="ghost">Annulla</Button>
16      </DrawerClose>
17      <DrawerClose asChild>
18        <Button variant="primary">Applica</Button>
19      </DrawerClose>
20    </DrawerFooter>
21  </DrawerContent>
22</Drawer>

docsChrome.sections.sides

Right is the default — typical for filters and detail panels. Bottom works well on mobile.

1<DrawerContent side="left">…</DrawerContent>
2<DrawerContent side="right">…</DrawerContent>
3<DrawerContent side="top">…</DrawerContent>
4<DrawerContent side="bottom">…</DrawerContent>

Props

Drawer props
PropTypeDefaultDescription
openboolean—Controlled open state on the root.
defaultOpenbooleanfalseUncontrolled initial open state on the root.
onOpenChange(open: boolean) => void—Fires whenever the open state changes.
side'left' | 'right' | 'top' | 'bottom''right'Prop on DrawerContent. Sets the slide-in edge of the panel.
hideClosebooleanfalseProp on DrawerContent. Hides the built-in close button (rendered as an X in the upper right). Useful when the consumer renders their own close affordance.

Accessibility

  • Built on Radix Dialog: focus is trapped inside the panel while open and returned to the trigger on close. Esc closes the drawer; clicks on the overlay close it too.
  • Always pair DrawerTitle and DrawerDescription with the content — Radix wires them as the dialog's accessible name and description.
  • The built-in close button uses an Italian label aria-label="Chiudi". There is currently no prop to override it; if you need a different language, set hideClose and render your own close affordance with DrawerClose as asChild.

Drawer vs Dialog

  • Reach for Drawer when the panel hosts a flow of related controls (filters, settings, side editor) — the panel can stay tall and dominate one edge of the screen.
  • Reach for Dialog for a centred modal — confirmations, single-step forms, or focused tasks.
← DialogBanner →