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";

Usage

Basic Dialog

Simple informational dialog

Confirmation Dialog

Dialog for confirming destructive actions

Form Dialog

Dialog containing a form

API Reference

PropTypeDefaultDescription
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

Related Components

DrawerPopoverAlert