Drawer

organisms

Side panel overlay. Slides in from left/right for navigation or content.

ARIA Role: dialog

Demo

Cart

VIP Pass

Qty 2

$240.00

General Admission

Qty 1

$45.00

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	Yes	`—`	Drawer open state
`onClose`	`() => void`	Yes	`—`	Close handler
`placement`	`'left' \| 'right'`	No	`'right'`	Drawer position
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	No	`'md'`	Drawer width
`children`	`React.ReactNode`	Yes	`—`	Drawer content
`title`	`string`	No	`—`	Drawer title

TypeScript Interface

interface DrawerProps {
  open: boolean;
  onClose: () => void;
  placement?: 'left' | 'right';
  size?: 'sm' | 'md' | 'lg' | 'full';
  children: React.ReactNode;
  title?: string;
}

Assertions (NASA Rule 5)

[aria]Drawer uses role='dialog' with aria-modal='true' (modal) or aria-label (non-modal)(WAI-ARIA APG)
[aria]Focus trapped within drawer when modal(WCAG 2.4.3)
[keyboard]Escape closes drawer, focus returns to trigger(WCAG 2.1.1)

Usage

Import

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

Basic

<Drawer />

With Variants

<Drawer variant="primary" size="md" />