Dialog

A centered modal surface for decisions and short forms that need full attention before work continues.

When to use

• Confirming a destructive or irreversible action (delete, revoke, restore over current data).
• Short focused forms (rename, invite one person) that should block the page until done.
• Not for side editing that benefits from seeing the page: use Drawer. Not for lightweight contextual controls: use Popover.

Usage

import { Dialog } from "@/components/iris/dialog/dialog";

h(
  Dialog,
  null,
  h(DialogTrigger, { asChild: true }, h(Button, { variant: "secondary" }, "Delete project")),
  h(
    DialogContent,
    { title: "Delete project “blog”?", description: "Deleting removes the project and its database cell." },
    h(DialogClose, { asChild: true }, h(Button, { variant: "ghost" }, "Cancel")),
    h(Button, { variant: "danger" }, "Delete project"),
  ),
);

Props

Dialog (root, wraps Radix Dialog Root)

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Initial state when uncontrolled.
onOpenChange	(open: boolean) => void	—	Called whenever the dialog opens or closes.
modal	boolean	true	Radix modal behaviour.

DialogContent

Prop	Type	Default	Description
title	string	—	Required. Dialog heading; a changed title cross-fades in place.
description	string	—	Optional supporting text, linked via aria-describedby.
children	ReactNode	—	Body: fields and the action row.
…Radix Content props			e.g. onOpenAutoFocus, onEscapeKeyDown, className.

DialogTrigger and DialogClose are the Radix primitives; use asChild with your own button.

Notes

• Focus moves into the dialog on open (the close button by default; redirect it with onOpenAutoFocus), is trapped while open, and returns to the trigger. Escape and an overlay click close it. The close button is labelled "Close dialog".
• Opens with an 8px rise and slight scale on a spring; closing is shorter. Reduced motion uses a plain fade.
• Portals to body and covers the viewport with an overlay.
• Reads --surface, --hover, --line, --ink, --ink-2, --text-lg, --radius-surface and --shadow-floating.