Print Desk

The Atom design system, rendered live from its own tokens and components — it cannot drift from what ships.

Docs Components

Modal & ConfirmDialogexperimental

A focused dialog over a dimmed page. It traps focus, closes on Escape, and hands focus back where you left off. The delete confirmation is the only place in the whole product with a solid red button.

modaldialogoverlayconfirm

Accessibility

Escape — Closes the dialog.
Tab / Shift+Tab — Cycles focus inside the dialog (trapped); focus returns to the trigger on close.

API

Prop	Type	Description
`open` required	`boolean`	Controlled visibility.
`onClose` required	`function`	Escape, scrim click, and the × all route here.
`title` required	`string`	Names the dialog (aria-labelledby).
`actions`	`ReactNode`	Footer buttons, right-aligned; primary action last.
`ConfirmDialog.destructive`	`boolean`	Applies btn-danger-solid to the confirm button — the only filled red allowed anywhere.

Design specifications

scrim scrim-base / layer-overlay
surface color-bg-raised
border color-border-rule / border-width-rule
radius radius-lg
shadow elevation-plate-md
max-width space-10 × 8

Guidelines

mustConfirm dialogs state consequences concretely ('removed from all 67 regions') and name the recovery path.
mustThe confirm button repeats the verb ('Delete collection'), never 'OK'.
shouldModals interrupt; prefer inline editing or drawers for non-blocking work.
mustScroll locking MUST compensate for the removed scrollbar (reserve its width as body padding) so background content never shifts when a dialog opens.