A modal window that opens over the page.
close: Closes the dialog imperatively when called.children | ReactNode | PayloadChildRenderFunction<Payload> | – | The content of the dialog. This can be a regular React node or a render function that receives the |
defaultOpen | boolean | false | Whether the dialog is initially open. To render a controlled dialog, use the |
defaultTriggerId | string|null | – | ID of the trigger that the dialog is associated with. This is useful in conjunction with the |
disablePointerDismissal | boolean | false | Whether to prevent the dialog from closing on outside presses. For non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it. |
handle | DialogHandle<Payload> | – | A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method. |
modal | boolean|"trap-focus" | true | Determines if the dialog enters a modal state when open.
When |
onOpenChange | ((open: boolean, eventDetails: DialogRootChangeEventDetails) => void) | – | Event handler called when the dialog is opened or closed. |
onOpenChangeComplete | ((open: boolean) => void) | – | Event handler called after any animations complete when the dialog is opened or closed. |
open | boolean | – | Whether the dialog is currently open. |
triggerId | string|null | – | ID of the trigger that the dialog is associated with. This is useful in conjunction with the |
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
DialogCreateHandle is called, not rendered. It creates a handle: pass it as handle to a trigger and to the root, and the trigger can sit anywhere in the tree, outside the root.
undefined