DrawerPrimitive

Root component for a drawer (mobile-friendly slide-up panel). Manages open/closed state. Pass container to portal the drawer (and its scrim) into a bounded element instead of the document body — used by the mobile-nav overlay to scope the drawer to its own layer. Import from "@desk/ui/components/drawer".

Usage

@desk/ui/components/drawer

<Drawer>
  <DrawerTrigger asChild>
    <Button emphasis="outline" icon={SlidersHorizontal} tone="neutral">
      Filter materials
    </Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filter materials</DrawerTitle>
      <DrawerDescription>
        Narrow the catalog by finish and origin.
      </DrawerDescription>
    </DrawerHeader>
    <Text className="px-4" size="sm" variant="muted">
      Showing 128 materials across 14 collections.
    </Text>
    <DrawerFooter>
      <Button>Apply filters</Button>
      <Button emphasis="ghost" tone="neutral">
        Reset
      </Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Best practices

Drawer is the touch-first slide-up panel — reach for Sheet for desktop side panels and Dialog for centered modals.
Always render a DrawerTitle inside DrawerContent (sr-only if visually hidden) — the underlying primitives require it for aria-labelledby.
Pass container to scope the drawer and its scrim to a bounded element instead of the viewport (the mobile-nav overlay pattern).

Props

Prop	Type	Default	Description
showHandle	`boolean`	`true`	Show the drag handle (bottom drawers).

Also exports

componentDrawer
componentDrawerClose
componentDrawerDescription
componentDrawerFooter
componentDrawerHeader
componentDrawerOverlay
componentDrawerPortal
componentDrawerPrimitive
componentDrawerTitle
componentDrawerTrigger

Composition

Used by

MobileNavigationRoot