#Drawer

A side panel for work the reader does alongside the page — its differentiator is that it can run non-modal, so with modal={false} they can keep using what is behind it. Reach for Dialog when the panel is a decision to resolve now, since that is the same panel with the exit closed off.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@wallarm-org/design-system/Drawer';

#Examples

#With footer

DrawerFooter for the actions that commit the work. It stays put while the body scrolls.

#With description

DrawerDescription under the title, wired to aria-describedby so it is read with the panel rather than after it. DrawerHeader stacks the two, keeping the close button right-aligned.

#With footer left actions

A left-aligned secondary action, separated from the committing pair on the right.

#Sizes

The standard widths. A drawer earns more width than a dialog because the reader is working in it rather than answering it.

#Custom sizes

Explicit width bounds for content the standard steps do not fit.

#Resizable

DrawerResizeHandle lets the reader set the width themselves — the part Dialog deliberately does not export, because a decision does not need resizing.

#Resizable with overflow list

Resizing with content that reflows, which is the case worth testing: the panel is only useful at its new width if what is inside adapts.

#Scrollable

The body scrolls between a fixed header and footer, so the actions never scroll away from the work.

#Controlled

Owning open, for a panel something outside it opens or closes.

#No closable on esc

Escape disabled, for a panel holding unsaved work where a reflex keystroke would lose it.

#No overlay

Without the backdrop, which is how a drawer reads as non-blocking. Pair it with modal={false} if the page behind should also stay usable.

#With nested

A drawer from a drawer: same family, so the outer one steps back and the depth is legible.

#With nested dialog

A dialog opened from a drawer — different family, so the drawer stays put rather than scaling. That separation is what kind exists for.

#With nested select

A Select inside a drawer, checking its menu escapes the panel instead of being clipped.

#With tabs

Tabs inside a drawer, which suits a panel with several facets of one subject.

#Props

#DrawerClose

#DrawerContent

#DrawerFooterControls

#DrawerPositioner

#DrawerTrigger

#Explorer