Drawer

A panel that slides up from the bottom, for phones.

In Multi-brand

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Drawer in StorybookSee it in dark

When to use it

In Multi-brand: Details or a short form on a phone, with the page partly in view. Not for blocking decisions; dialog and alert-dialog hold those.

• Use it when: Filters, details or a short form on a phone, while the page stays partly in view.
• Not when: A blocking decision (dialog), or a wide screen where a side panel fits better (sheet).

Instead:

• Sheet: Slides from an edge on wide screens.
• Dialog: A blocking decision.

Words

• Shared structure: object, state, next step.
• Brand tone lives in headlines and marketing copy, not in errors.
• Errors and confirmations read the same in every brand.
• Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Cancel
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Get started

See Voice and tone for the whole voice.

Accessibility and keyboard

Keyboard	What happens	Not
undefined	Escape closes it.	undefined

Test before you ship:

• It behaves as a dialog: named, focus moves in and back. undefined

Use it in code

npx open-ds add drawer

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Drawer reads 14 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Drawer's tokens to change Drawer alone.

Changes with theme

Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Shared
Transition panels duration	component.transition.panels-durationmotion.duration.panelsvar(--transition-panels-duration)	duration.relaxed:320ms
Overlay
Fill Changes with theme	component.drawer.overlay.backgroundcolor.surface.scrimvar(--drawer-overlay-background)	Aster Lightblack.light.scrim:#0000008CAster Darkblack.dark.scrim:#000000B3Birch Lightblack.light.scrim:#0000008CBirch Darkblack.dark.scrim:#000000B3Coral Lightblack.light.scrim:#0000008CCoral Darkblack.dark.scrim:#000000B3
Content
Fill Changes with theme	component.drawer.content.backgroundcolor.surface.canvasvar(--drawer-content-background)	Aster Lightslate-deep.light.50:#F8FAFCAster Darkslate-deep.dark.0:#020617Birch Lightslate-deep.light.50:#F8FAFCBirch Darkslate-deep.dark.0:#020617Coral Lightslate-deep.light.50:#F8FAFCCoral Darkslate-deep.dark.0:#020617
Drawer
Corner	component.drawer.radiusradius.roundvar(--drawer-radius)	radius.full:9999px
Fill Changes with theme	component.drawer.backgroundcolor.surface.sunkenvar(--drawer-background)	Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B
Header
Gap	component.drawer.header.gapcomponent-spacing-map.hairlinevar(--drawer-header-gap)	space.2:0.125rem
Padding	component.drawer.header.paddingspace.inset.containervar(--drawer-header-padding)	space.24:1.5rem
Gap 2	component.drawer.header.gap-2component-spacing-map.x2var(--drawer-header-gap-2)	space.8:0.5rem
Footer
Gap	component.drawer.footer.gapspace.gap.defaultvar(--drawer-footer-gap)	space.12:0.75rem
Padding	component.drawer.footer.paddingspace.inset.containervar(--drawer-footer-padding)	space.24:1.5rem
Title
Weight	component.drawer.title.font-weighttype.title.font-weightvar(--drawer-title-font-weight)	font.weight.600:600
Text Changes with theme	component.drawer.title.labelcolor.text.primaryvar(--drawer-title-label)	Aster Lightslate-deep.light.900:#0F172AAster Darkslate-deep.dark.900:#F8FAFCBirch Lightslate-deep.light.900:#0F172ABirch Darkslate-deep.dark.900:#F8FAFCCoral Lightslate-deep.light.900:#0F172ACoral Darkslate-deep.dark.900:#F8FAFC
Description
Text size	component.drawer.description.font-sizetype.body.font-sizevar(--drawer-description-font-size)	font.size.16:1rem
Text Changes with theme	component.drawer.description.labelcolor.text.mutedvar(--drawer-description-label)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Aster Lightslate-deep.light.200 · #E2E8F0Aster Darkslate-deep.dark.100 · #1E293BBirch Lightslate-deep.light.200 · #E2E8F0Birch Darkslate-deep.dark.100 · #1E293BCoral Lightslate-deep.light.200 · #E2E8F0Coral Darkslate-deep.dark.100 · #1E293B
Corner Changes with theme	radius.container straight from the system, through --radius-lg	Aster Lightradius.8 · 0.5rem (8px)Aster Darkradius.8 · 0.5rem (8px)Birch Lightradius.16 · 1rem (16px)Birch Darkradius.16 · 1rem (16px)Coral Lightradius.20 · 1.25rem (20px)Coral Darkradius.20 · 1.25rem (20px)