Dialog

A modal primitive: dimmed backdrop, centered panel with header / body / footer slots, Esc and backdrop-click dismissal, and body-scroll lock while open. It floats above the rest of the page, unaffected by any clipping ancestor.

Basic

A simple confirm dialog with title, eyebrow, body text, and an action footer.

Publish dataset

A real-world form: a text input for the dataset family name, a radio list of source bindrs, and a primary publish action. Demonstrates building form fields inside the dialog body using design tokens — uppercase mono labels, underlined inputs, custom radio dots that fill with var(--uikit-accent) when picked.

Behavior

Floats above the page — the dialog appears above all other content and is never clipped by an overflow-hidden, transformed, or sticky ancestor.
Body scroll lock — the page behind the dialog can't scroll while it's open; scrolling is restored on close.
Esc + backdrop dismissal — both routes call the same onClose handler. Caller controls whether to honor the dismissal (e.g. confirm before closing if there are unsaved edits).
Theme-aware — the backdrop dims the page and the panel uses the surface and shadow tokens, so it flips automatically in dark mode.

No focus trap shipped — the panel does not steal or trap focus. If you need keyboard-only flow within the dialog (e.g. a multi-step form), wire up your own focus management on the body content.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Required. Controlled open state.
`onClose`	`() => void`	—	Required. Fires when the user dismisses the dialog (Esc key, backdrop click, or any explicit close affordance the caller renders). Caller must flip `open` to false.
`title`	`ReactNode`	—	Heading rendered top-left of the panel. 17px semibold ink.
`eyebrow`	`string`	—	Small uppercase mono label rendered next to the title.
`footer`	`ReactNode`	—	Footer content. Typically a row of action buttons aligned right.
`width`	`number`	`480`	Panel width in px.
`showEscHint`	`boolean`	`true`	Show the muted "esc" hint in the header. Clicking it also calls `onClose`.
`dismissOnBackdropClick`	`boolean`	`true`	Dismiss when the user clicks the dimmed backdrop.
`dismissOnEsc`	`boolean`	`true`	Dismiss when the user presses Escape.
`className`	`string`	—	Extra classes on the panel element.
`children`	`ReactNode`	—	Body content — typically form fields, message text, or a custom layout.