Drawer

When to use

Side panel that slides in from the edge. Best for detail views, filters, settings. Maintains spatial context unlike Dialog.

Guidelines

  • Width: Use 320px for filters, 480px for detail views, 640px for complex forms.
  • Direction: Right for detail panels, left for navigation.
  • Overlay backdrop: Dim the main content to maintain focus on the drawer.

How it works