Skip to content
Site volume
Colourway

Components

Dialog

A modal plate over a scrim: focus trapped, Escape closes, focus returns, the page is inert.

Import from@maxgrits/overprint-react/dialog
On this page

Example#

Look of this example
Live render of examples/dialog/basic.tsx

Usage#

Use a dialog to stop and ask for one decision or one short task: confirm a delete, rename a project, add a person. The page behind goes inert under a scrim, focus moves in, and Escape or a close key brings people back to where they were.

  • Parts. DialogTrigger, DialogContent (size sm, md or lg; a close key by default), DialogTitle (required), DialogDescription, DialogBody, DialogFooter and DialogClose.
  • alert makes an alert dialog for destructive confirmations: no closing by a press outside.
  • The footer puts actions at the end, the main one last; below 30rem they stack full width with the main one at the bottom, in thumb reach.
  • Long forms or anything people move between is a Drawer or its own page. Never open a dialog from a dialog more than once.

Anatomy#

The parts of examples/dialog/basic.tsx, numbered:
  1. PlateRaised surface, 2 px ink rule, 28, 36 or 48 rem wide..mk-dialog-popup
  2. TitleThe question, in the card head role..mk-dialog-title
  3. Close keyQuiet, at the top end..mk-dialog-close
  4. FooterActions at the end, the main one last..mk-dialog-footer

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The title asks the question or names the task: "Delete the draft?"
  • The description says the consequence: "This cannot be undone."
  • Keys say what they do: "Delete the draft" and "Keep it", never "OK" and "Cancel".

Do and don't#

Do

The question and the consequence, with keys that say what happens.

Don't

Are you sure? [OK] [Cancel]

Neither the question nor the keys say what will happen.

People read dialogs fast and press a key. The keys alone should be enough to make the right choice.

Accessibility#

  • Focus moves to the first focusable element (or initialFocus), Tab cycles inside, Escape closes and focus returns to the trigger.
  • The popup is named by DialogTitle and described by DialogDescription; alert makes an alertdialog that an outside press cannot close.
  • It portals with its trigger's scope, so a dialog opened in a Night section prints on Night.
  • Below 30rem the footer stacks with the primary action at the bottom, in thumb reach.
KeysWhat happens
EnterorSpace on the triggerOpens the dialog; focus moves to its first focusable element
TaborShift+TabCycle inside the dialog (focus is trapped)
EscapeCloses it; focus returns to the trigger

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

TextSurfaceRoleBoneNight
--mk-text--mk-surface-raiseduinot in this looknot in this look
--mk-text-2--mk-surface-raiseduinot in this looknot in this look

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

Props#

PropTypeDefaultDescription
openbooleannone
defaultOpenbooleannone
onOpenChange((open: boolean) => void)none
alertbooleannone`role="alertdialog"`; an outside press does not close it.
children requiredReactNodenone

Generated from DialogProps in packages/overprint-react/src/reading/dialog/dialog.tsx.

Tokens#

System tokens (29)

Its own properties (3)

  • --mk-dialog-close-room
  • --mk-dialog-pad
  • --mk-dialog-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.