Drawer

Usage

Drawer is a controlled component — pair open with a piece of local state and wire onClose so the scrim click and the Escape key dismiss it. The panel portals to document.body, locks body scroll while open, and restores it on close. Always pass title or ariaLabel so the dialog is named (WCAG 4.1.2).

import { Drawer, Button } from '@epasslive/design-system'

const [open, setOpen] = useState(false)

<Button variant="primary" onClick={() => setOpen(true)}>Open cart</Button>
<Drawer
  open={open}
  onClose={() => setOpen(false)}
  placement="right"
  size="lg"
  title="Your cart"
>
  <p>Cart contents go here.</p>
</Drawer>

Drawer vs Modal vs CartDrawer

• Blocking, centered task (confirm, short form) → Modal (max-w sizes fit small viewports).
• Side-anchored navigation or secondary content (filters, cart, details) → Drawer (this molecule).
• A complete cart UI (lines, totals, checkout CTA, fr/en labels) → CartDrawer — an organism that composes this Drawer; bring your own chrome for anything else.
• App-level navigation on mobile → Sidebar(nav-specific chrome: localized close label and an 85vw mobile width guard).
• Drawer now traps focus and returns it to the trigger on close (mol51 step 6); Modal does not yet — if keyboard containment is required in a centered overlay, wire it via composition until Modal adopts the same fixes.

Accessibility

• Renders role="dialog" with aria-modal="true", portalled to document.body; named via title (h2 wired through aria-labelledby) or ariaLabel (takes precedence). If neither is passed the dialog is unnamed — always set one (WCAG 4.1.2).
• Escape closes (document keydown, stopPropagation); scrim is a real <button> whose accessible name comes from closeLabel — default "Close drawer" (English); pass a localized string for non-English apps.
• Body scroll is locked while open and restored on close. On open the panel container receives initial focus; while open, a focus trap cycles Tab/Shift+Tab within the panel (WCAG 2.4.3); on close, focus returns to the trigger (the element focused when the drawer opened).
• Known gap (fix tracked): no open/close animation — the panel appears and disappears instantly. Top/bottom placement is not implemented (left/right only); panels carry a max-w-full guard so sm/md/lg never exceed the viewport width.
• Color contrast meets WCAG AA in both themes (token-driven surface/border/heading colors).

Props