Drawer

Slide‑in side panel component with a trigger button. It slides from the left or right using a spring animation, includes an overlay backdrop, locks body scrolling, and supports keyboard accessibility. Ideal for detailed content panels, filter sidebars, navigation menus, and supplementary information.

Use Cases

• Filter/sort panel in e‑commerce product listings
• Navigation menu for mobile‑friendly layouts
• Detailed information sidebar (product specs, user profiles)
• Settings panel that slides in without leaving the page
• Shopping cart preview sliding from right
• Help/documentation sidebar

Properties

triggerLabel

Text on the button that opens the drawer. Type: string.

triggerVariant

Visual style of the trigger button. Type: string. Options: primary, secondary, outline, ghost. Default: primary

title

Title in the drawer header. Type: string.

content

Main content of the drawer. Supports line breaks with \n. Type: string.

side

Which side the drawer slides in from. Type: string. Options: left, right. Default: right

width

Drawer width: sm(320px), md(420px), lg(560px). Type: string. Options: sm, md, lg. Default: md

showCloseButton

Show X close button in header. Type: boolean. Default: true

overlayClose

Allow closing by clicking the backdrop. Type: boolean. Default: true

customCss

Custom CSS styles. Type: string.

Best Practices

• Use side ‘right’ for content/detail panels (most common, user expectation)
• Use side ‘left’ for navigation or filter panels
• Keep width ‘sm’ for navigation/filters, ‘md’ for content, ‘lg’ for detailed views
• Always include a title so users know the panel’s purpose
• Use ‘outline’ or ‘ghost’ trigger for secondary panels to avoid visual clutter

Common Mistakes

Using Drawer when Modal would be more appropriate

Why it's a problem: Drawers are for side panels with scrollable content. Modals are for centered, focused messages.

Fix: Use Modal for short messages/confirmations. Use Drawer for longer content, navigation, or filter panels.