Dialog Component

Dialogs interrupt the user with critical information or confirmation prompts.

Example

dialog Example

live demo

Usage

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

;<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description of the dialog purpose.</DialogDescription>
    </DialogHeader>
    {/* Dialog content */}
  </DialogContent>
</Dialog>

Props

Prop	Type	Default
open	`boolean`	controlled or uncontrolled
onOpenChange	`(open: boolean) => void`	—