Modal

Docs draft

Component story Figma component ↗React component ↗DSDS entity ↗

When to use it

useFocused work that blocks the page: pickers, forms, confirmations.

avoidA single yes/no decision — that composition exists ready-made. confirm-dialog

avoidMulti-step flows. The old Stepped Modal was a wizard trapped in an overlay. page-navigation page navigation.

Anatomy

surface — bg.elevated + shadow.modal, square corners as the old system built it, 720 max (narrow: 480).

top block — The 44px close target ALONE, top right — the old modals have no title bar.

content column — CENTERED: title (title-3), then the Content SLOT — a true SlotNode: drop anything in per instance (inputs, CTAs, graphics). Ships with .Modal Content / Message as default and / Form as a ready-made drop-in reproducing the old form modal. Buttons stack full-width on small screens (code's responsibility).

scrim — bg.scrim (#23252B at 50%, the old .Scrim) — a token painted on ::backdrop, never a component.

Design specifications

surface	color.bg.elevated
shadow	shadow.modal
radius	radius.none — the old modals were square; flagged for review
padding-content	space.80 x / space.48 bottom at full width; space.24 narrow
close	44px target, Icon/Close glyph in color.text.secondary
scrim	color.bg.scrim

Accessibility

Escape — Closes (native dialog).

Tab — Trapped inside; background is inert (native dialog).

Built on the native dialog element with showModal — focus trap, Escape, and inert background come from the platform, never re-implemented.