Dialog
A focused, modal task lifted out of the page.
A modal task lifted out of the page. Every Dialog needs a DialogTitle — it is what names the dialog to a screen reader. If the dialog confirms something destructive, use AlertDialog instead.
Default
DialogTrigger asChild hands the trigger behaviour to your own button rather than rendering a second one. DialogClose asChild does the same for the footer.
Controlled
Pass open and onOpenChange when something other than the trigger needs to open or close the dialog — a keyboard shortcut, or a save that should only dismiss on success.
Props
Dialog
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Called whenever the dialog opens or closes. |
DialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
hideOverlay | boolean | false | Drops the scrim. Used by the command palette. |
showClose | boolean | true | Renders the corner close button. |
overlayClassName | string | — | Classes for the scrim rather than the panel. |
DialogTrigger / DialogClose
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Apply the behaviour to your own element instead of rendering a button. |