Dialog
A modal window that interrupts the user's workflow and requires an action. Built on Radix UI Dialog with focus management and keyboard dismissal.
Anatomy
- Dialog — Root provider. Manages open state.
- DialogTrigger — Element that opens the dialog when clicked.
- DialogContent — The modal panel. Renders in a portal.
- DialogHeader — Top section, holds title + description.
- DialogTitle — Required. Announces the dialog to screen readers.
- DialogDescription — Optional subtitle / context.
- DialogFooter — Bottom action area.
- DialogClose — A button that closes the dialog.
Simple Dialog
A confirmation dialog with cancel and destructive actions in the footer.
Controlled State
Control the open state externally using the open and onOpenChange props:
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
defaultOpen | boolean | false | Uncontrolled default open state. |
modal | boolean | true | When true, interaction outside closes the dialog. |