overlays / stable

Dialog

Modal dialog for a focused task: 10px radius, dimmed backdrop, zoom/fade in.

LIVE PREVIEW

Loading preview…

When to use

A short blocking decision or one-field task that must finish (or be cancelled) before returning to the page: rename, pick an option.
Content that needs the user's full attention.

Consider an alternative

Confirming a destructive action — use AlertDialog.
Create / edit forms and record details next to a list — use a right-side Sheet (see its Form drawer example).
Light, contextual content anchored to a control — use Popover.

Import

import { Dialog } from '@revido-llc/kit';

Keyboard interaction

Escape — close
Tab / Shift+Tab — cycle focus inside (trapped)

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


aria-label	string	—	Accessible name when the dialog has no `DialogTitle`.
children	ReactNode \| ((opts: DialogRenderProps) => ReactNode)	—
className	string	—	Classes for the dialog surface.
defaultOpen	boolean	—
isDismissable	boolean	true	Close when the backdrop is clicked. Default true.
isKeyboardDismissDisabled	boolean	—	Disable closing with Escape.
isOpen	boolean	—	Controlled open state (only when not inside a `DialogTrigger`).
layer	"dialog" \| "lightbox" \| "confirmation"	"dialog"	Layer tier. lightbox sits above dialogs/drawers; confirmation remains above it.
onOpenChange	((isOpen: boolean) => void)	—
overlayClassName	string	—	Classes for the backdrop.
placement	"center" \| "top"	"center"	`center` (default) or `top` (15vh from the top — command palettes, search).
role	"dialog" \| "alertdialog"	"dialog"	ARIA role. AlertDialog passes `alertdialog`.
size	"full" \| "lg" \| "md" \| "sm" \| "xl"	"md"	Max width: sm 400 · md 520 (default) · lg 640 · xl 800 · full (viewport minus overlay padding).

Related exports

DialogTrigger, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose

Examples

Sizes

sm 400 · md 520 (default) · lg 640 · xl 800 · full (viewport minus overlay padding).

<DialogTrigger>
  <Button variant="outline">Open</Button>
  <Dialog size="lg">…</Dialog>
</DialogTrigger>

Controlled

Open from code (e.g. a shortcut) with isOpen / onOpenChange — no trigger needed.

const [open, setOpen] = useState(false);
<Dialog isOpen={open} onOpenChange={setOpen} aria-label="Keyboard shortcuts">…</Dialog>

Layered preview

A lightbox stays above the record dialog; closing the preview returns focus to its trigger.

<Dialog layer="lightbox" isOpen={previewOpen} onOpenChange={setPreviewOpen} aria-label="Attachment preview">
  <DialogBody>{image}</DialogBody>
</Dialog>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<DialogTrigger><Button>Open details</Button><Dialog><DialogHeader><DialogTitle>Draft details</DialogTitle><DialogDescription>Review this draft.</DialogDescription></DialogHeader><DialogBody>Ready for review.</DialogBody><DialogFooter><DialogClose>Close</DialogClose></DialogFooter></Dialog></DialogTrigger>