//
A modal dialog that interrupts the user with important content and expects a response.
bun add xiod-ui1import {2 AlertDialog,3 AlertDialogBackdrop,4 AlertDialogOverlay,5 AlertDialogClose,6 AlertDialogContent,7 AlertDialogPopup,8 AlertDialogCreateHandle,9 AlertDialogDescription,10 AlertDialogFooter,11 AlertDialogHeader,12 AlertDialogPortal,13 AlertDialogTitle,14 AlertDialogTrigger,15 AlertDialogViewport16} from "xiod-ui/alert-dialog";1<AlertDialog>2 <AlertDialogTrigger />3 <AlertDialogContent>4 <AlertDialogHeader>5 <AlertDialogDescription />6 <AlertDialogTitle />7 </AlertDialogHeader>8 <AlertDialogBackdrop />9 <AlertDialogOverlay />10 <AlertDialogPopup />11 <AlertDialogPortal />12 <AlertDialogViewport />13 <AlertDialogFooter>14 <AlertDialogClose />15 </AlertDialogFooter>16 </AlertDialogContent>17</AlertDialog>| Prop | Type | Default | Description |
|---|---|---|---|
onOpenChange | ((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)| undefined | - | Event handler called when the alert dialog is opened or closed. |
actionsRef | RefObject<DialogRootActions| null>| undefined | - | A ref to imperative actions. - `unmount`: Manually unmounts the alert dialog. Call this after any externally controlled closing animation finishes. - `close`: Closes the alert dialog imperatively when called. |
handle | AlertDialogHandle<Payload>| undefined | - | A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method. |
children | ReactNode| PayloadChildRenderFunction<Payload> | - | The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger. |
open | boolean| undefined | - | Whether the dialog is currently open. |
defaultOpen | boolean| undefined | false | Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead. |
onOpenChangeComplete | ((open: boolean) => void)| undefined | - | Event handler called after any animations complete when the dialog is opened or closed. |
triggerId | string| null| undefined | - | ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set). |
defaultTriggerId | string| null| undefined | - | ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open 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. |
bottomStickOnMobile | boolean| undefined | true |
| 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 |
|---|---|---|---|
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 | AlertDialogHandle<unknown>| undefined | - | A handle to associate the trigger with an alert dialog. Can be created with the AlertDialog.createHandle() method. |
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. |
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. |
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). |
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. |
payload | unknown | - | A payload to pass to the dialog when it is opened. |
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>`). |
| 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. |