# Alert Dialog (/cloud/headless/alert-dialog) {/* Generated by scripts/sync-base-ui-reference.mjs. Edit the script, not this file. */} ## In Nyte [#in-nyte] ```ts title="Import" import { AlertDialog } from "@nyte-ai/ui/alert-dialog"; ``` `@nyte-ai/ui/alert-dialog` re-exports the Base UI namespace unchanged. There is no Nyte styling on this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the interaction model, keyboard handling, focus management, and ARIA below. Consumed by: * `desktop/src/renderer/src/components/confirm-dialog.tsx` The rest of this page is Base UI's documentation for `@base-ui/react/alert-dialog`, reproduced verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI package; in Nyte, import from the subpath above. ## Anatomy [#anatomy] Import the component and assemble its parts: ```jsx title="Anatomy" import { AlertDialog } from '@base-ui/react/alert-dialog'; ; ``` ## Examples [#examples] ### Open from a menu [#open-from-a-menu] In order to open a dialog using a menu, control the dialog state and open it imperatively using the `onClick` handler on the menu item. ### Close confirmation [#close-confirmation] This example shows a nested confirmation dialog that opens if the text entered in the parent dialog is going to be discarded. To implement this, both dialogs should be controlled. The confirmation dialog may be opened when `onOpenChange` callback of the parent dialog receives a request to close. This way, the confirmation is automatically shown when the user clicks the backdrop, presses the Esc key, or clicks a close button. Use the `[data-nested-dialog-open]` selector and the `var(--nested-dialogs)` CSS variable to customize the styling of the parent dialog. Backdrops of the child dialogs won't be rendered so that you can present the parent dialog in a clean way behind the one on top of it. ### Detached triggers [#detached-triggers] An alert dialog can be controlled by a trigger located either inside or outside the `` component. For simple, one-off interactions, place the `` inside ``, as shown in the example at the top of this page. However, if defining the alert dialog's content next to its trigger is not practical, you can use a detached trigger. This involves placing the `` outside of `` and linking them with a `handle` created by the `AlertDialog.createHandle()` function. The imperative methods on the handle, such as `open()` and `openWithPayload()`, require an `` using the same handle to be mounted. Calls made while no root is attached to the handle — before one mounts, or after it unmounts — are ignored. Each time a root mounts, it starts from fresh state: a call made while no root was attached is not replayed, and no open state carries over from a previous mount. ```jsx title="Detached triggers" const demoAlertDialog = AlertDialog.createHandle(); // @highlight // @highlight-text "handle={demoAlertDialog}" Open // @highlight // @highlight-text "handle={demoAlertDialog}" ... ``` ### Multiple triggers [#multiple-triggers] A single alert dialog can be opened by multiple trigger elements. You can achieve this by using the same `handle` for several detached triggers, or by placing multiple `` components inside a single ``. ```jsx title="Multiple triggers within the Root part" Trigger 1 Trigger 2 ... ``` ```jsx title="Multiple detached triggers" const demoAlertDialog = AlertDialog.createHandle(); Trigger 1 Trigger 2 ... ``` The alert dialog can render different content depending on which trigger opened it. This is achieved by passing a `payload` to the `` and using the function-as-a-child pattern in ``. The payload can be strongly typed by providing a type argument to the `createHandle()` function: ```jsx title="Detached triggers with payload" // @highlight const demoAlertDialog = AlertDialog.createHandle<{ message: string }>(); // @highlight // @highlight-text "payload" Trigger 1 // @highlight // @highlight-text "payload" Trigger 2 {({ payload }) => ( // @highlight-text "payload" Alert dialog {payload !== undefined && ( // @highlight-text "payload" Confirming {payload.message} {/* @highlight-text "payload" */} )} )} ``` ### Controlled mode with multiple triggers [#controlled-mode-with-multiple-triggers] You can control the alert dialog's open state externally using the `open` and `onOpenChange` props on ``. This allows you to manage the alert dialog's visibility based on your application's state. When using multiple triggers, you have to manage which trigger is active with the `triggerId` prop on `` and the `id` prop on each ``. Note that there is no separate `onTriggerIdChange` prop. Instead, the `onOpenChange` callback receives an additional argument, `eventDetails`, which contains the trigger element that initiated the state change. ## API reference [#api-reference] ### Root [#root] Groups all parts of the alert dialog. Doesn't render its own HTML element. **Root Props:** | Prop | Type | Default | Description | | :------------------- | :----------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | defaultOpen | `boolean` | `false` | Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead. | | open | `boolean` | - | Whether the dialog is currently open. | | onOpenChange | `((open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void)` | - | Event handler called when the alert dialog is opened or closed. | | actionsRef | `React.RefObject` | - | 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. | | defaultTriggerId | `string \| null` | - | 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. | | handle | `AlertDialog.Handle` | - | 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. | | onOpenChangeComplete | `((open: boolean) => void)` | - | Event handler called after any animations complete when the dialog is opened or closed. | | triggerId | `string \| null` | - | 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). | | children | `React.ReactNode \| PayloadChildRenderFunction` | - | The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger. | ### Root.Props [#rootprops] Re-export of [Root](#root) props. ### Root.State [#rootstate] ```typescript type AlertDialogRootState = {}; ``` ### Root.Actions [#rootactions] ```typescript type AlertDialogRootActions = { unmount: () => void; close: () => void }; ``` ### Root.ChangeEventReason [#rootchangeeventreason] ```typescript type AlertDialogRootChangeEventReason = | 'trigger-press' | 'outside-press' | 'escape-key' | 'close-press' | 'focus-out' | 'imperative-action' | 'none'; ``` ### Root.ChangeEventDetails [#rootchangeeventdetails] ```typescript type AlertDialogRootChangeEventDetails = ( | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent } | { reason: 'outside-press'; event: MouseEvent | PointerEvent | TouchEvent } | { reason: 'escape-key'; event: KeyboardEvent } | { reason: 'close-press'; event: MouseEvent | PointerEvent | KeyboardEvent } | { reason: 'focus-out'; event: KeyboardEvent | FocusEvent } | { reason: 'imperative-action'; event: Event } | { reason: 'none'; event: Event } ) & { /** Cancels Base UI from handling the event. */ cancel: () => void; /** Allows the event to propagate in cases where Base UI will stop the propagation. */ allowPropagation: () => void; /** Indicates whether the event has been canceled. */ isCanceled: boolean; /** Indicates whether the event is allowed to propagate. */ isPropagationAllowed: boolean; /** The element that triggered the event, if applicable. */ trigger: Element | undefined; preventUnmountOnClose: preventUnmountOnClose; }; ``` ### Trigger [#trigger] A button that opens the alert dialog. Renders a `