Dialog
Use Dialog for a short task that must interrupt the current page without replacing it. The title should name that task, and the footer should contain only the actions needed to finish or leave it.
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 for a panel that opens from a screen edge and leaves part of the page visible for reference.
Usage
Use asChild on DialogTrigger with a <button> or Button child.
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 provides the accessible title and is required. DialogContent includes a close button in the top-right corner.
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 the instructions and actions brief. A separate page or sheet is a better fit for longer forms.
- Keep the trigger mounted while the dialog is open so focus can return to it after closing.
Glass appearance
Set appearance="glass" on DialogContent when the page should remain visible through the panel. Check text contrast against the actual backdrop; see Liquid glass for the complete example.