Dialog

Overlays

A modal overlay that requires user interaction. Use dialogs for important information, confirmations, or forms that need user focus.

Import

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogBody,
  DialogFooter
} from "@/components/ui/dialog";

A responsive dialog that adapts to screen size. On mobile, the dialog expands to full width with stacked buttons for better touch interaction.

open*—

boolean

Whether the dialog is open

onClose*—

() => void

Handler called when dialog should close

size"md"

"sm" | "md" | "lg" | "xl"

Width of the dialog

Prop	Type	Default	Description
`open*`	`boolean`	—	Whether the dialog is open
`onClose*`	`() => void`	—	Handler called when dialog should close
`size`	`"sm" \| "md" \| "lg" \| "xl"`	"md"	Width of the dialog