Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Dialog Props
Prop | Type | Default |
---|---|---|
open | boolean | - |
onOpenChange | (open: boolean) => void | - |
modal | boolean | true |
Dialog.Content Props
Prop | Type | Default |
---|---|---|
width | string | number | - |
overlayBlur | boolean | - |
overlayClassName | string | - |
overlayStyle | CSSProperties | - |
className | string | - |
side | "top" | "right" | "bottom" | "left" | - |
ariaLabel | string | - |
ariaDescription | string | - |
Dialog.Header Props
Prop | Type | Default |
---|---|---|
className | string | - |
children | ReactNode | - |
Dialog.Title Props
Prop | Type | Default |
---|---|---|
className | string | - |
children | ReactNode | - |
Dialog.Body Props
Prop | Type | Default |
---|---|---|
className | string | - |
children | ReactNode | - |
Dialog.Description Props
Prop | Type | Default |
---|---|---|
className | string | - |
Dialog.Trigger Props
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
className | string | - |
Dialog.CloseButton Props
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
className | string | - |
Dialog.Footer Props
Prop | Type | Default |
---|---|---|
className | string | - |
children | ReactNode | - |
Examples
Controlled Dialog
Example of a controlled dialog with custom state management.
Custom Width and Overlay
Example with custom width and overlay styling.
With Header and Body
Example with header and body.
With Body and Footer
Example with header and body.
Accessibility
- Dialog has
role="dialog"
andaria-modal="true"
- Uses
aria-label
oraria-labelledby
to identify the dialog - Uses
aria-describedby
to provide additional context