Dialog
General-purpose modal for forms, detail views, and confirmations. For destructive confirms, prefer AlertDialog. Built on Radix UI.
Anatomy
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<DialogTitle />
<DialogDescription />
</DialogHeader>
<DialogBody />
<DialogFooter>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>Examples
Destructive
Sizes
DialogContent props
size= 'md'
'sm' | 'md' | 'lg' | 'xl' | 'full'
Max width of the dialog panel.
children*
ReactNode
Dialog content.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Max width of the dialog panel. |
| children* | ReactNode | — | Dialog content. |