A panel anchored to an edge
Drawer shares Dialog’s modal contract — focus trap, focus restore, scroll lock, ESC and scrim dismissal — but slides in from a viewport edge instead of scaling from the centre. That makes it the right home for filter panels, detail views, and mobile navigation, where keeping the page visible behind the panel is part of the point.
Default
Right-anchored, 420px wide. The body scrolls on its own so the header stays pinned.
Sides
Side drawers are sized in pixels; top and bottom drawers are sized as a fraction of viewport height.
With a footer
The footer right-aligns your Buttons and stays pinned while the body scrolls — the standard shape for a filter panel.
Sizes
sm 320px · md 420px (default) · lg 560px. Side drawers go full-width below 480px.
Scrolling body
Non-dismissible
With dismissible={false}, ESC and the scrim stop working and the close button is hidden — a footer action becomes the only way out. Use it sparingly.