Drawer

Example#

Volume

Paper

Colourway

Live render of examples/drawer/basic.tsx

Usage#

Use a drawer for a task that needs more room than a dialog but should keep the page in view: the quote form, filters, the phone navigation. It has the Dialog's parts and keyboard, sliding from a side.

Sides. side is end (default), start, bottom or top, or responsive such as { base: "bottom", md: "end" }.
Sticky edges. The header with its close key stays at the top, and DrawerFooter sticky keeps the form's Send in reach; only the body scrolls.
No drag to dismiss. The close key, Escape and the scrim cover it, for every input method.
A single decision is a Dialog. Content people link to or bookmark is a page.

Anatomy#

PanelRaised surface from its side, up to 32 rem wide..mk-drawer-popup
TitleIn the sticky header with the close key..mk-drawer-title
BodyThe only part that scrolls..mk-drawer-body
FooterSticky: the main action stays in reach..mk-drawer-footer

Volume#

Reading layer: identical at every volume.

Quiet
Get a quote
One working day for a reply.
Tell me what you are making.
Docs, forms, legal and long reads. Flat inks, no art in motion.
Studio
Get a quote
One working day for a reply.
Tell me what you are making.
The site default. Art on its own plates, one display moment per view.
Press
Get a quote
One working day for a reply.
Tell me what you are making.
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
Get a quote
One working day for a reply.
Tell me what you are making.
Launches, posters and the 404. Every ink, and the words still win.

Content#

The title names the task: "Get a quote".
The description sets expectations: "One working day for a reply."
The main key repeats the task's verb: "Send", with "Not now" to leave.

Do and don't#

The footer stays in reach.

Don't

A drawer whose Send key scrolls away under a long form.

The action hides at the bottom of a scroll.

On a phone a long form pushes its own Send out of view. A sticky footer keeps the one action that matters on screen.

Accessibility#

Same keyboard as Dialog. No drag to dismiss: the close key, Escape and the backdrop cover it.
It slides in on transforms only; reduced motion fades.

Keys	What happens
`Enter`or`Space on the trigger`	Opens the drawer; focus moves inside
`Tab`or`Shift`+`Tab`	Cycle inside the drawer (focus is trapped)
`Escape`	Closes it; focus returns to the trigger

The colour pairs it prints, with their contrast on both papers:

Text	Surface	Role	Bone	Night
`--mk-text`	`--mk-surface-raised`	ui	not in this look	not in this look
`--mk-text-2`	`--mk-surface-raised`	ui	not in this look	not in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

Prop	Type	Default	Description
`open`	`boolean`	none
`defaultOpen`	`boolean`	none
`onOpenChange`	`((open: boolean) => void)`	none
`alert`	`boolean`	none	`role="alertdialog"`; an outside press does not close it.
`children` required	`React.ReactNode`	none

Generated from DrawerProps in packages/overprint-react/src/reading/drawer/drawer.tsx.

Tokens#

System tokens (30)

Its own properties (15)

--mk-drawer-be
--mk-drawer-bs
--mk-drawer-close-room
--mk-drawer-from
--mk-drawer-h
--mk-drawer-ie
--mk-drawer-is
--mk-drawer-max-h
--mk-drawer-pad
--mk-drawer-radius
--mk-drawer-rule-be
--mk-drawer-rule-bs
--mk-drawer-rule-ie
--mk-drawer-rule-is
--mk-drawer-w

Scanned from its CSS at build and checked against its registry entry; 17 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.