Alert Dialog

A dialog that requires a user response to proceed.

import { AlertDialog } from '@base-ui/react/alert-dialog';
import styles from './index.module.css';

export default function ExampleAlertDialog() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger data-color="red" className={styles.Button}>
        Discard draft
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className={styles.Backdrop} />
        <AlertDialog.Popup className={styles.Popup}>
          <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
          <AlertDialog.Description className={styles.Description}>
            You can't undo this action.
          </AlertDialog.Description>
          <div className={styles.Actions}>
            <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
            <AlertDialog.Close data-color="red" className={styles.Button}>
              Discard
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

import { AlertDialog } from '@base-ui/react/alert-dialog';

<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Portal>
    <AlertDialog.Backdrop />
    <AlertDialog.Viewport>
      <AlertDialog.Popup>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Close />
      </AlertDialog.Popup>
    </AlertDialog.Viewport>
  </AlertDialog.Portal>
</AlertDialog.Root>

Examples

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.

Connecting a dialog to a menu

import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
import { Menu } from '@base-ui/react/menu';

function ExampleMenu() {
  const [dialogOpen, setDialogOpen] = React.useState(false);

  return (
    <React.Fragment>
      <Menu.Root>
        <Menu.Trigger>Open menu</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner>
            <Menu.Popup>
              {/* Open the dialog when the menu item is clicked */}
              <Menu.Item onClick={() => setDialogOpen(true)}>Open dialog</Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      {/* Control the dialog state */}
      <AlertDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
        <AlertDialog.Portal>
          <AlertDialog.Backdrop />
          <AlertDialog.Popup>
            {/* Rest of the dialog */}
          </AlertDialog.Popup>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    </React.Fragment>
  );
}

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

An alert dialog can be controlled by a trigger located either inside or outside the <AlertDialog.Root> component. For simple, one-off interactions, place the <AlertDialog.Trigger> inside <AlertDialog.Root>, 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 <AlertDialog.Trigger> outside of <AlertDialog.Root> and linking them with a handle created by the AlertDialog.createHandle() function.

Detached triggers

const demoAlertDialog = AlertDialog.createHandle();

<AlertDialog.Trigger handle={demoAlertDialog}>Open</AlertDialog.Trigger>

<AlertDialog.Root handle={demoAlertDialog}>
  ...
</AlertDialog.Root>

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
import styles from './index.module.css';

const demoAlertDialog = AlertDialog.createHandle();

export default function AlertDialogDetachedTriggersSimpleDemo() {
  return (
    <React.Fragment>
      <AlertDialog.Trigger
        className={`${styles.Button} ${styles.DangerButton}`}
        handle={demoAlertDialog}
      >
        Discard draft
      </AlertDialog.Trigger>

      <AlertDialog.Root handle={demoAlertDialog}>
        <AlertDialog.Portal>
          <AlertDialog.Backdrop className={styles.Backdrop} />
          <AlertDialog.Popup className={styles.Popup}>
            <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
            <AlertDialog.Description className={styles.Description}>
              This action cannot be undone.
            </AlertDialog.Description>
            <div className={styles.Actions}>
              <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
              <AlertDialog.Close className={`${styles.Button} ${styles.DangerButton}`}>
                Discard
              </AlertDialog.Close>
            </div>
          </AlertDialog.Popup>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    </React.Fragment>
  );
}

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 <AlertDialog.Trigger> components inside a single <AlertDialog.Root>.

Multiple triggers within the Root part

<AlertDialog.Root>
  <AlertDialog.Trigger>Trigger 1</AlertDialog.Trigger>
  <AlertDialog.Trigger>Trigger 2</AlertDialog.Trigger>
  ...
</AlertDialog.Root>

Multiple detached triggers

const demoAlertDialog = AlertDialog.createHandle();

<AlertDialog.Trigger handle={demoAlertDialog}>Trigger 1</AlertDialog.Trigger>
<AlertDialog.Trigger handle={demoAlertDialog}>Trigger 2</AlertDialog.Trigger>
<AlertDialog.Root handle={demoAlertDialog}>
  ...
</AlertDialog.Root>

The alert dialog can render different content depending on which trigger opened it. This is achieved by passing a payload to the <AlertDialog.Trigger> and using the function-as-a-child pattern in <AlertDialog.Root>.

The payload can be strongly typed by providing a type argument to the createHandle() function:

Detached triggers with payload

const demoAlertDialog = AlertDialog.createHandle<{ message: string }>();

<AlertDialog.Trigger handle={demoAlertDialog} payload={{ message: 'Trigger 1' }}>
  Trigger 1
</AlertDialog.Trigger>

<AlertDialog.Trigger handle={demoAlertDialog} payload={{ message: 'Trigger 2' }}>
  Trigger 2
</AlertDialog.Trigger>

<AlertDialog.Root handle={demoAlertDialog}>
  {({ payload }) => (
    <AlertDialog.Portal>
      <AlertDialog.Popup>
        <AlertDialog.Title>Alert dialog</AlertDialog.Title>
        {payload !== undefined && (
          <AlertDialog.Description>
            Confirming {payload.message}
          </AlertDialog.Description>
        )}
      </AlertDialog.Popup>
    </AlertDialog.Portal>
  )}
</AlertDialog.Root>

Controlled mode with multiple triggers

You can control the alert dialog’s open state externally using the open and onOpenChange props on <AlertDialog.Root>. 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 <AlertDialog.Root> and the id prop on each <AlertDialog.Trigger>.

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.

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
import styles from './index.module.css';

type AlertPayload = { message: string };

const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();

export default function AlertDialogDetachedTriggersControlledDemo() {
  const [open, setOpen] = React.useState(false);
  const [triggerId, setTriggerId] = React.useState<string | null>(null);

  const handleOpenChange = (isOpen: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => {
    setOpen(isOpen);
    setTriggerId(eventDetails.trigger?.id ?? null);
  };

  return (
    <React.Fragment>
      <div className={styles.Container}>
        <AlertDialog.Trigger
          className={`${styles.Button} ${styles.DangerButton}`}
          handle={demoAlertDialog}
          id="alert-trigger-1"
          payload={{ message: 'Discard draft?' }}
        >
          Discard
        </AlertDialog.Trigger>

        <AlertDialog.Trigger
          className={`${styles.Button} ${styles.DangerButton}`}
          handle={demoAlertDialog}
          id="alert-trigger-2"
          payload={{ message: 'Delete project?' }}
        >
          Delete
        </AlertDialog.Trigger>

        <AlertDialog.Trigger
          className={styles.Button}
          handle={demoAlertDialog}
          id="alert-trigger-3"
          payload={{ message: 'Sign out?' }}
        >
          Sign out
        </AlertDialog.Trigger>

        <button
          className={styles.Button}
          type="button"
          onClick={() => {
            setTriggerId('alert-trigger-2');
            setOpen(true);
          }}
        >
          Open programmatically
        </button>
      </div>

      <AlertDialog.Root<AlertPayload>
        handle={demoAlertDialog}
        open={open}
        onOpenChange={handleOpenChange}
        triggerId={triggerId}
      >
        {({ payload }) => (
          <AlertDialog.Portal>
            <AlertDialog.Backdrop className={styles.Backdrop} />
            <AlertDialog.Popup className={styles.Popup}>
              <AlertDialog.Title className={styles.Title}>
                {payload?.message ?? 'Are you sure?'}
              </AlertDialog.Title>
              <AlertDialog.Description className={styles.Description}>
                This action cannot be undone.
              </AlertDialog.Description>
              <div className={styles.Actions}>
                <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
                <AlertDialog.Close className={`${styles.Button} ${styles.DangerButton}`}>
                  Confirm
                </AlertDialog.Close>
              </div>
            </AlertDialog.Popup>
          </AlertDialog.Portal>
        )}
      </AlertDialog.Root>
    </React.Fragment>
  );
}

API reference

Root

Groups all parts of the alert dialog. Doesn’t render its own HTML element.

defaultOpenbooleanfalse

Name: defaultOpen
Description: Whether the dialog is initially open.

To render a controlled dialog, use the open prop instead.
Type: boolean | undefined
Default: false

openboolean—

Name: open
Description: Whether the dialog is currently open.
Type: boolean | undefined

onOpenChangefunction—

Name: onOpenChange
Description: Event handler called when the dialog is opened or closed.
Type: | (( open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails, ) => void) | undefined

actionsRefReact.RefObject<AlertDialog.Root.Actions | null>—

Name: actionsRef
Description: A ref to imperative actions.

unmount: When specified, the dialog will not be unmounted when closed. Instead, the unmount function must be called to unmount the dialog manually. Useful when the dialog’s animation is controlled by an external library.

close: Closes the dialog imperatively when called.
Type: | React.RefObject<AlertDialog.Root.Actions | null> | undefined

defaultTriggerIdstring | null—

Name: defaultTriggerId
Description: 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.
Type: string | null | undefined

handleAlertDialog.Handle<Payload>—

Name: handle
Description: 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.
Type: AlertDialog.Handle<Payload> | undefined

onOpenChangeCompletefunction—

Name: onOpenChangeComplete
Description: Event handler called after any animations complete when the dialog is opened or closed.
Type: ((open: boolean) => void) | undefined

triggerIdstring | null—

Name: triggerId
Description: 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 popover is uncontrolled (that is, when the open prop is not set).
Type: string | null | undefined

children

| React.ReactNode 
|  PayloadChildRenderFunction<Payload>

—

Name: children
Description: The content of the dialog. This can be a regular React node or a render function that receives the payload of the active trigger.
Type: React.ReactNode | ((arg: { payload: unknown | undefined }) => ReactNode)<Payload> | undefined

AlertDialog.Root.PropsHide

Re-Export of Root props as AlertDialogRootProps

AlertDialog.Root.StateHide

type AlertDialogRootState = {}

AlertDialog.Root.ActionsHide

type AlertDialogRootActions = { unmount: () => void; close: () => void }

AlertDialog.Root.ChangeEventReasonHide

type AlertDialogRootChangeEventReason =
  | 'trigger-press'
  | 'outside-press'
  | 'escape-key'
  | 'close-press'
  | 'focus-out'
  | 'imperative-action'
  | 'none'

AlertDialog.Root.ChangeEventDetailsHide

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: (() => void);
}

Trigger

A button that opens the dialog. Renders a <button> element.

handleAlertDialog.Handle<Payload>—

Name: handle
Description: A handle to associate the trigger with a dialog. Can be created with the Dialog.createHandle() method.
Type: AlertDialog.Handle<Payload> | undefined

nativeButtonbooleantrue

Name: nativeButton
Description: 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>).
Type: boolean | undefined
Default: true

payloadPayload—

Name: payload
Description: A payload to pass to the dialog when it is opened.
Type: Payload | undefined

idstring—

Name: id
Description: ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialogs in controlled mode (with the DialogRoot triggerId prop).
Type: string | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: AlertDialog.Trigger.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Trigger.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Trigger.State, ) => ReactElement) | undefined

data-popup-open

Present when the corresponding dialog is open.

data-disabled

Present when the trigger is disabled.

Attribute	Description	-
`data-popup-open`	Present when the corresponding dialog is open.
`data-disabled`	Present when the trigger is disabled.

AlertDialog.Trigger.PropsHide

Re-Export of Trigger props as AlertDialogTriggerProps

AlertDialog.Trigger.StateHide

type AlertDialogTriggerState = {
  /** Whether the dialog is currently disabled. */
  disabled: boolean;
  /** Whether the dialog is currently open. */
  open: boolean;
}

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

containerUnion—

Name: container
Description: A parent element to render the portal element into.
Type: | HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: AlertDialog.Portal.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Portal.State, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean | undefined
Default: false

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Portal.State, ) => ReactElement) | undefined

AlertDialog.Portal.PropsHide

Re-Export of Portal props as AlertDialogPortalProps

AlertDialog.Portal.StateHide

type AlertDialogPortalState = {}

Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

forceRenderbooleanfalse

Name: forceRender
Description: Whether the backdrop is forced to render even when nested.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: AlertDialog.Backdrop.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Backdrop.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Backdrop.State, ) => ReactElement) | undefined

data-open

Present when the dialog is open.

data-closed

Present when the dialog is closed.

data-starting-style

Present when the dialog is animating in.

data-ending-style

Present when the dialog is animating out.

Attribute	Description	-
`data-open`	Present when the dialog is open.
`data-closed`	Present when the dialog is closed.
`data-starting-style`	Present when the dialog is animating in.
`data-ending-style`	Present when the dialog is animating out.

AlertDialog.Backdrop.PropsHide

Re-Export of Backdrop props as AlertDialogBackdropProps

AlertDialog.Backdrop.StateHide

type AlertDialogBackdropState = {
  /** Whether the dialog is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
}

Viewport

A positioning container for the dialog popup that can be made scrollable. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: AlertDialog.Viewport.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Viewport.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Viewport.State, ) => ReactElement) | undefined

data-open

Present when the dialog is open.

data-closed

Present when the dialog is closed.

data-nested

Present when the dialog is nested within another dialog.

data-nested-dialog-open

Present when the dialog has other open dialogs nested within it.

data-starting-style

Present when the dialog is animating in.

data-ending-style

Present when the dialog is animating out.

Attribute	Description	-
`data-open`	Present when the dialog is open.
`data-closed`	Present when the dialog is closed.
`data-nested`	Present when the dialog is nested within another dialog.
`data-nested-dialog-open`	Present when the dialog has other open dialogs nested within it.
`data-starting-style`	Present when the dialog is animating in.
`data-ending-style`	Present when the dialog is animating out.

AlertDialog.Viewport.PropsHide

Re-Export of Viewport props as AlertDialogViewportProps

AlertDialog.Viewport.StateHide

type AlertDialogViewportState = {
  /** Whether the dialog is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the dialog is nested within another dialog. */
  nested: boolean;
  /** Whether the dialog has nested dialogs open. */
  nestedDialogOpen: boolean;
}

A container for the dialog contents. Renders a <div> element.

initialFocusUnion—

Name: initialFocus
Description: Determines the element to focus when the dialog is opened.

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, or false/undefined to do nothing.
Type: | boolean | React.RefObject<HTMLElement | null> | (( openType: 'mouse' | 'touch' | 'pen' | 'keyboard' | '', ) => boolean | void | HTMLElement | null) | undefined

finalFocusUnion—

Name: finalFocus
Description: 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, or false/undefined to do nothing.
Type: | boolean | React.RefObject<HTMLElement | null> | (( closeType: | 'mouse' | 'touch' | 'pen' | 'keyboard' | '', ) => boolean | void | HTMLElement | null) | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: AlertDialog.Popup.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Popup.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Popup.State, ) => ReactElement) | undefined

data-open

Present when the dialog is open.

data-closed

Present when the dialog is closed.

data-nested

Present when the dialog is nested within another dialog.

data-nested-dialog-open

Present when the dialog has other open dialogs nested within it.

data-starting-style

Present when the dialog is animating in.

data-ending-style

Present when the dialog is animating out.

Attribute	Description	-
`data-open`	Present when the dialog is open.
`data-closed`	Present when the dialog is closed.
`data-nested`	Present when the dialog is nested within another dialog.
`data-nested-dialog-open`	Present when the dialog has other open dialogs nested within it.
`data-starting-style`	Present when the dialog is animating in.
`data-ending-style`	Present when the dialog is animating out.

--nested-dialogs

Indicates how many dialogs are nested within.

CSS Variable	Description	-
`--nested-dialogs`	Indicates how many dialogs are nested within.

AlertDialog.Popup.StateHide

type AlertDialogPopupState = {
  /** Whether the dialog is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the dialog is nested within a parent dialog. */
  nested: boolean;
  /** Whether the dialog has nested dialogs open. */
  nestedDialogOpen: boolean;
}

Title

A heading that labels the dialog. Renders an <h2> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: AlertDialog.Title.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Title.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Title.State, ) => ReactElement) | undefined

AlertDialog.Title.PropsHide

Re-Export of Title props as AlertDialogTitleProps

AlertDialog.Title.StateHide

type AlertDialogTitleState = {}

Description

A paragraph with additional information about the dialog. Renders a <p> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: AlertDialog.Description.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Description.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Description.State, ) => ReactElement) | undefined

AlertDialog.Description.PropsHide

Re-Export of Description props as AlertDialogDescriptionProps

AlertDialog.Description.StateHide

type AlertDialogDescriptionState = {}

Close

A button that closes the dialog. Renders a <button> element.

nativeButtonbooleantrue

Name: nativeButton
Description: 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>).
Type: boolean | undefined
Default: true

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: AlertDialog.Close.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: AlertDialog.Close.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: AlertDialog.Close.State, ) => ReactElement) | undefined

data-disabled

Present when the button is disabled.

Attribute	Description	-
`data-disabled`	Present when the button is disabled.

AlertDialog.Close.PropsHide

Re-Export of Close props as AlertDialogCloseProps

AlertDialog.Close.StateHide

type AlertDialogCloseState = {
  /** Whether the button is currently disabled. */
  disabled: boolean;
}

createHandle

Return value

AlertDialog.Handle<Payload>

Handle

A handle to control a Dialog imperatively and to associate detached triggers with it.

Constructor parameters

storeDialogStore<Payload>—

Name: store
Type: DialogStore<Payload> | undefined

Properties

isOpen

boolean

readonly

Name: isOpen
Description: Indicates whether the dialog is currently open.
Type: boolean
Modifiers: readonly

Methods

open(triggerId)

void

Name: open
Description: Opens the dialog and associates it with the trigger with the given id. The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.

This method should only be called in an event handler or an effect (not during rendering).
Parameters: triggerId—
string | null
ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
Returns: void

openWithPayload(payload)

void

Name: openWithPayload
Description: Opens the dialog and sets the payload. Does not associate the dialog with any trigger.
Parameters: payload—
Payload
Payload to set when opening the dialog.
Returns: void

close()

void

Name: close
Description: Closes the dialog.
Returns: void

Alert Dialog

AlertDialog.Root.PropsHide

AlertDialog.Root.StateHide

AlertDialog.Root.ActionsHide

AlertDialog.Root.ChangeEventReasonHide

AlertDialog.Root.ChangeEventDetailsHide

AlertDialog.Trigger.PropsHide

AlertDialog.Trigger.StateHide

AlertDialog.Portal.PropsHide

AlertDialog.Portal.StateHide

AlertDialog.Backdrop.PropsHide

AlertDialog.Backdrop.StateHide

AlertDialog.Viewport.PropsHide

AlertDialog.Viewport.StateHide

AlertDialog.Popup.PropsHide

AlertDialog.Popup.StateHide

AlertDialog.Title.PropsHide

AlertDialog.Title.StateHide

AlertDialog.Description.PropsHide

AlertDialog.Description.StateHide

AlertDialog.Close.PropsHide

AlertDialog.Close.StateHide

Return value

Constructor parameters

Properties

Methods