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