ComponentsDialog
Dialog
The Dialog component is a powerful and highly customizable tool for creating dialog windows, also known as modals, in your application. It includes essential elements such as triggers, content, and close triggers.
The Dialog component is a powerful and highly customizable tool for creating dialog windows, also known as modals, in your application. It includes essential elements such as triggers, content, and close triggers.
| Prop | Type | Default |
|---|---|---|
aria-label | string | |
closeOnEsc | boolean | |
closeOnOutsideClick | boolean | |
defaultOpen | boolean | |
dir | 'ltr' | 'rtl' | "ltr" |
finalFocusEl | HTMLElement | (() => MaybeElement) | |
getRootNode | () => ShadowRoot | Node | Document | |
id | string | |
ids | Partial<{
trigger: string
container: string
backdrop: string
content: string
closeTrigger: string
title: string
description: string
}> | |
initialFocusEl | HTMLElement | (() => MaybeElement) | |
modal | boolean | |
onEsc | VoidFunction | |
onOpenChange | (details: OpenChangeDetails) => void | |
onOutsideClick | VoidFunction | |
open | boolean | |
preventScroll | boolean | |
restoreFocus | boolean | |
role | 'dialog' | 'alertdialog' | "dialog" |
trapFocus | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
lazyMount | boolean | false |
onExitComplete | () => void | |
present | boolean | |
unmountOnExit | boolean | false |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
lazyMount | boolean | false |
onExitComplete | () => void | |
present | boolean | |
unmountOnExit | boolean | false |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |