Dialog
When to use
- Confirm a destructive action
- Edit a small set of fields without leaving the page
- Show required information the user must acknowledge
Use Sheet if the content should stay attached to one edge, or if the user may need the page behind it as reference.
Usage
The trigger should be a real button. Prefer asChild on DialogTrigger.
Usage
Structure
| Part | Role |
|---|---|
Dialog | Open state |
DialogTrigger | Opens the dialog |
DialogContent | Portal, overlay, and panel |
DialogHeader / DialogTitle / DialogDescription | Accessible heading |
DialogFooter | Actions |
DialogClose | Explicit close |
DialogTitle is required for accessibility. DialogContent already renders a corner close button.
API Reference
The trigger accepts asChild. DialogContent already includes a close button.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | On DialogTrigger and DialogClose. Merge props onto a real button child. |
open | boolean | — | Controlled open state on Dialog. |
defaultOpen | boolean | — | Uncontrolled initial open state on Dialog. |
onOpenChange | (open: boolean) => void | — | Called when the dialog opens or closes. |
Notes
- The
asChildchild must be a button. Do not wrapButtonin adiv. - Keep dialog copy short. Long forms belong in a page or a sheet.