Drawer
Last Updated: September 2026Drawers are overlay containers that allow the application to expose more content or controls to the user without navigating them away from their current page.
Source CodeAnatomy
link- 1Drawer Title
- 2Close Button
- 3Content Slot
- 4Actions Footer
Variants
linkBasic
Title, body, and an external trigger controlling open state.
With subheading
subheading adds secondary context under the title.
With actions
actions renders a footer row for primary and secondary buttons.
Custom padding
contentPadding={false} when the body manages its own spacing.
Usage Guidelines
linkWhen to use
- •For detail panels, filters, or forms that should stay in context of the page.
- •When the task is longer than a small popover but shouldn't jump to a new route.
- •For side workflows that benefit from full-height layout.
When not to use
- •For short confirmations — use Modal.
- •For tiny contextual help — use Popover or Tooltip.
- •When the user must finish a blocking decision before continuing — prefer Modal.
Use drawers for focused side tasks that keep page context visible.
Don't use a drawer for a simple confirmation — use a Modal.
Pair a clear title with explicit footer actions when saving.
Don't leave the title vague — title is required and should describe the task.
Behaviors
linkOpen and close
- •Control with open + onOpenChange, or use Drawer.Trigger for an uncontrolled trigger.
- •A built-in close control is included in the header.
Layout
- •Drawers slide in from the right.
- •Content is portaled; closed content is unmounted unless configured otherwise by Base UI.
Content Guidelines
linkTitles
- •Name the task ('Edit filters', 'Patient details').
- •Use subheading for secondary context, not a duplicate title.
Actions
- •Put primary Save/Apply in actions; keep Cancel quieter (tertiary/neutral).
- •Avoid burying the only way to dismiss inside long body content.
Accessibility
linkText & Labels
- •title is required and names the dialog.
- •The close control includes an accessible label.
ARIA attributes
- •Drawer behaves as a modal dialog surface while open.
- •Focus is managed within the drawer while it is open.
Keyboard Support
- •Esc → dismiss (unless configured otherwise).
- •Tab → cycle focus within the drawer.
WCAG Compliance Standards
FAQs
linkDrawer vs Modal?
Drawer keeps page context for longer side tasks. Modal centers blocking decisions and short workflows.
How do I open it from a button?
Store open in React.useState and pass open / onOpenChange to Drawer. Set open to true from the button's onClick.
Can I change the edge it slides from?
Not currently — drawers are configured to slide in from the right.