Confirmation dialog
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent size="sm">
<DialogHeader>
<DialogTitle>Delete item?</DialogTitle>
<DialogDescription>
This action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="destructive" onClick={handleDelete}>Delete</Button>
</DialogFooter>
</DialogContent>
</Dialog>Form dialog
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent size="lg">
<DialogClose onClose={() => setOpen(false)} />
<DialogHeader>
<DialogTitle>Create project</DialogTitle>
</DialogHeader>
<DialogBody>
<div className="space-y-4">
<Input placeholder="Project name" />
<Textarea placeholder="Description" />
</div>
</DialogBody>
<DialogFooter>
<Button onClick={() => setOpen(false)}>Create</Button>
</DialogFooter>
</DialogContent>
</Dialog>Full-screen dialog
<DialogContent size="full">…</DialogContent>