Dialog

Composition

Use this public composition when building Dialog:

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Usage

<Dialog>
  <DialogTrigger render={<Button />}>Open</DialogTrigger>
  <DialogContent><DialogTitle>Confirm</DialogTitle></DialogContent>
</Dialog>

Examples

Sizes

Use size to match the amount of content and decision complexity in the dialog.

Render a Dialog inside another — e.g. a discard confirmation over an edit form. The parent scales back under a light, blur-free backdrop so it stays visible behind the child, and clicking outside the top dialog closes it.

The Dialog roots must be nested in the React tree for this visual relationship. Sibling roots are independent and do not produce the stacking effect, even if both dialogs are open at the same time. Portalling the popup does not break its React-tree nesting.

Without the nesting effect

Set nestingEffect="none" on both participating content surfaces when the second dialog should behave as a focused overlay without moving its parent. The parent keeps its position and close control, while the child uses the normal strong, blurred overlay.

Playground

Switch size to compare widths and padding.

Size

Props

Prop/API	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Dialog content width and padding.
`showCloseButton`	`boolean`	`true`	Renders the floating close button.
`nestingEffect`	`"stack" \| "none"`	`"stack"`	Enables or removes this surface's visual nesting treatment. Use `"none"` on both surfaces to keep the parent stationary and give the child its normal overlay.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Accessibility

Preserve the documented Dialog composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.

Quick Preview