Dialog
A modal dialog for displaying content that requires user interaction. Supports multiple sizes, placements, backdrop styles, and scroll behaviors.
Import
Usage
Sizes
Radius
Shadow
Placement
Backdrop
Scroll Behavior
Non-Dismissable
Data Attributes
- -
data-slot="dialog"Root dialog element identifier - -
data-slot="dialog-trigger"Dialog trigger element identifier - -
data-slot="dialog-content"Dialog content element identifier - -
data-slot="dialog-header"Dialog header element identifier - -
data-slot="dialog-body"Dialog body element identifier - -
data-slot="dialog-footer"Dialog footer element identifier - -
data-slot="dialog-overlay"Dialog backdrop/overlay element identifier
Accessibility
Keyboard Support
- -
EscapeCloses the dialog - -
TabMoves focus to the next focusable element within the dialog - -
Shift + TabMoves focus to the previous focusable element
ARIA Attributes
- -
role="dialog"Applied to the dialog content - -
aria-modal="true"Indicates the dialog is modal - -
aria-labelledbyReferences the dialog title - -
aria-describedbyReferences the dialog description
Dialog Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state of the dialog. |
| onOpenChange | (open: boolean) => void | - | Callback when the open state changes. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full' | 'md' | The size/max-width of the dialog. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'lg' | The border radius of the dialog. |
| shadow | 'none' | 'sm' | 'md' | 'lg' | 'lg' | The shadow depth of the dialog. |
| placement | 'center' | 'top' | 'bottom' | 'top-center' | 'bottom-center' | 'center' | The vertical placement of the dialog. Use 'top-center' or 'bottom-center' for responsive positioning (top/bottom on mobile, center on desktop). |
| backdrop | 'opaque' | 'blur' | 'transparent' | 'opaque' | The backdrop style behind the dialog. |
| scrollBehavior | 'inside' | 'outside' | 'inside' | How scrolling is handled when content overflows. |
| hideCloseButton | boolean | false | Whether to hide the close button. |
| isDismissable | boolean | true | Whether clicking the backdrop closes the dialog. |
DialogContent Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| showCloseButton | boolean | inherits from Dialog | Whether to show the close button (overrides Dialog's hideCloseButton). |
| closeButton | ReactNode | - | Custom close button element. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full' | inherits from Dialog | Override the dialog size. |
| radius | 'none' | 'sm' | 'md' | 'lg' | inherits from Dialog | Override the border radius. |
| shadow | 'none' | 'sm' | 'md' | 'lg' | inherits from Dialog | Override the shadow depth. |
| scrollBehavior | 'inside' | 'outside' | inherits from Dialog | Override the scroll behavior. |
| children | ReactNode | - | Dialog content. |
