Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Usage
Loading...
Behavior
Dialogs are dismissible by default. Click the backdrop or press Escape to close.
If you want a blocking dialog, pass dismissible={false} to the root component.
Sticky footer
Use DialogFooter with sticky to keep actions visible while the body scrolls.
Loading...
Examples
Sticky footer
Edit profile
API Reference
The Dialog component manages open state and accessibility for dialogs.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state. |
defaultOpen | boolean | false | Initial open state. |
onOpenChange | (open: boolean) => void | undefined | Called when open state changes. |
dismissible | boolean | true | Close on Escape or backdrop click. |
The DialogContent supports size ("sm", "default", "lg") and overlayClassName for customization.