Skip to main content

Drawer (primitive)

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/primitives/Drawer/ (package @dtsl/naos-primitives, exported as Drawer, useDrawer)

Note: this is the low-level primitive Drawer component/hook. It is a different, unrelated component from the molecular DrawerPanel documented separately at drawer-panel — DrawerPanel's useDrawerPanel hook composes this primitive's DrawerPrimitive return shape internally (per DrawerPanel.types.ts).

Entry file exports (verbatim from index.js):

export { default as Drawer } from './components/Drawer'
export { default as useDrawer } from './hooks/useDrawer'
export { ANIMATE_FROM } from './constants'
export { getSuppressAnimationStyle } from './utils/getSuppressAnimationStyle'

The useDrawer hook's return shape (DrawerPrimitive, referenced from DrawerPanel.types.ts) includes: visible, shouldRender, onAnimationEnd, isMobile, animateFrom, open(), close(), toggle(), getTriggerProps(), getDrawerProps(), getCloseProps().

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. the higher-level DrawerPanel or Sidemodal for most product use cases, reserving this primitive for building new composite components).

Decision Logic​

TODO — needs UX/product input on when a team should reach for this primitive directly vs use DrawerPanel/Sidemodal.

Accessibility​

TODO — needs UX/product input.

Common Mistakes​

TODO — needs UX/product input.