Feedback
Drawer
Drawer slides into view from the edge of the screen to display additional content, navigation, or actions. It keeps the primary interface uncluttered while providing quick access to secondary information.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features11 checks
- role="dialog" and aria-modal="true" for proper screen reader context (WCAG 4.1.2)
- Focus trap keeps keyboard navigation within drawer when open (WCAG 2.4.3)
- Focus automatically moved to first focusable element on open (WCAG 2.4.3)
- Focus returned to trigger element on close (WCAG 2.4.3)
- Escape key closes drawer for keyboard users (WCAG 2.1.1)
- aria-labelledby references drawer title for context (WCAG 1.3.1)
- Overlay click closes drawer for mouse users (WCAG 2.5.1)
- Close button has visible focus indicator with 2px ring (WCAG 2.4.7)
- Body scroll prevented when drawer open to avoid confusion (WCAG 2.4.1)
- Color contrast ratios meet 4.5:1 for text content (WCAG 1.4.3)
- Animations respect prefers-reduced-motion (WCAG 2.3.3)
When to use this component
✓Do's
- •Side panel content that overlays the page
- •Mobile navigation menus
- •Filter or settings panels
- •Detail views without full page navigation
✗Don'ts
- •Critical confirmations, use Dialog
- •Full-page content, use a page
- •Brief messages, use Toast
- •Content that needs to stay visible, use sidebar layout
Do's and Don'ts
✓ Do's
HeaderSubtle text ✕
CancelConfirm
Pair exactly two footer actions, a secondary (outline) and a primary button, and keep the title at 20px with the description beneath it.
✗ Don'ts
Header✕
SaveApplyReset
Don't stack three+ buttons or make them all primary, keep one secondary and one primary action.