//
A window overlaid on either the primary window or another dialog window.
bun add xiod-ui1import {2 Dialog,3 DialogBackdrop,4 DialogOverlay,5 DialogClose,6 DialogContent,7 DialogPopup,8 DialogCreateHandle,9 DialogDescription,10 DialogFooter,11 DialogHeader,12 DialogPanel,13 DialogPortal,14 DialogTitle,15 DialogTrigger,16 DialogViewport17} from "xiod-ui/dialog";1<Dialog>2 <DialogTrigger />3 <DialogPopup>4 <DialogHeader>5 <DialogTitle />6 <DialogDescription />7 </DialogHeader>8 <DialogPanel />9 <DialogFooter>10 <DialogClose />11 </DialogFooter>12 </DialogPopup>13</Dialog>| Prop | Type | Default | Description |
|---|---|---|---|
forceRender | boolean| undefined | false | Whether the backdrop is forced to render even when nested. |
className | string| ((state: DialogBackdropState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogBackdropState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogBackdropState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: DialogCloseState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogCloseState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogCloseState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
initialFocus | boolean| RefObject<HTMLElement| null>| ((openType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. |
finalFocus | boolean| RefObject<HTMLElement| null>| ((closeType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | Determines the element to focus when the dialog is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. |
className | string| ((state: DialogPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
showCloseButton | boolean| undefined | true | |
bottomStickOnMobile | boolean| undefined | true | |
closeProps | DialogCloseProps| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: DialogDescriptionState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogDescriptionState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogDescriptionState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "bare"| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
scrollFade | boolean| undefined | true |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: DialogPortalState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: DialogPortalState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogPortalState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
keepMounted | boolean| undefined | false | Whether to keep the portal mounted in the DOM while the popup is hidden. |
container | HTMLElement| ShadowRoot| RefObject<HTMLElement| ShadowRoot| null>| null| undefined | - | A parent element to render the portal element into. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: DialogTitleState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogTitleState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogTitleState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
handle | DialogHandle<unknown>| undefined | - | A handle to associate the trigger with a dialog. Can be created with the Dialog.createHandle() method. |
payload | unknown | - | A payload to pass to the dialog when it is opened. |
id | string| undefined | - | ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop). |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: DialogTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: DialogViewportState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, DialogViewportState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: DialogViewportState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |