Dialog

Generic modal built on Radix. Body padding is built-in — pass children without extra wrappers.

Examples

Basic

const [open, setOpen] = useState(false);

<Dialog
  open={open}
  onOpenChange={setOpen}
  onClose={() => setOpen(false)}
  title="Confirmation"
  description="You're about to perform an important action."
  footer={
    <>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button onClick={() => setOpen(false)}>Confirm</Button>
    </>
  }
>
  <p className="text-sm text-muted-foreground">
    Free-form body content.
  </p>
</Dialog>

No close button, no overlay click

Use when the user must take an explicit action.

<Dialog
  open={open}
  showCloseButton={false}
  closeOnOverlayClick={false}
  title="Important"
  footer={<Button>Got it</Button>}
>
  ...
</Dialog>

API Reference

Props of the Dialog component.

Prop	Type	Default	Description
`open*`	`boolean`	—	—
`onOpenChange`	`(open: boolean) => void`	—	—
`onClose`	`() => void`	—	—
`title`	`string`	—	—
`description`	`string`	—	—
`icon`	`ReactNode`	—	Icon shown next to the title.
`footer`	`ReactNode`	—	Right-aligned footer (typically action buttons).
`maxWidth`	`string`	`'800px'`	—
`closeOnOverlayClick`	`boolean`	`false`	—
`closeOnEscape`	`boolean`	`true`	—
`showCloseButton`	`boolean`	`true`	—
`zIndex`	`number`	—	Override z-index when stacking with drawers.