AlertDialog

AlertDialog interrupts the user with important information requiring a decision before proceeding. Use for irreversible or destructive actions that require explicit confirmation, such as deleting records or cancelling subscriptions.

Code

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>
    Delete account
  </AlertDialogTrigger>

  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete account?</AlertDialogTitle>

      <AlertDialogDescription>
        This action cannot be undone. It will permanently delete the account and
        remove its saved records.
      </AlertDialogDescription>
    </AlertDialogHeader>

    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">
        Delete account
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API

AlertDialog

Name	Type/Description
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.
children	ReactNode | PayloadChildRenderFunction<unknown> The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.
defaultOpen = false	boolean | undefined Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
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.
handle	AlertDialogHandle<unknown> | 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.
onOpenChange	((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void) | undefined Event handler called when the alert dialog is opened or closed.
onOpenChangeComplete	((open: boolean) => void) | undefined Event handler called after any animations complete when the dialog is opened or closed.
open	boolean | undefined Whether the dialog is currently open.
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).

AlertDialogAction

Name	Type/Description
className	string | ((state: ButtonState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled = false	boolean | undefined Whether the button should be focusable when disabled.
nativeButton = true	boolean | undefined 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>`).
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState> | 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.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined

AlertDialogCancel

Name	Type/Description
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.
nativeButton = true	boolean | undefined 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>`).
ref	((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined
render	ReactElement<any, 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.
size = "default"	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined
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.
variant = "outline"	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined

AlertDialogContent

Name	Type/Description
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.
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.
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.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, 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.
size = "default"	"default" | "sm" | undefined
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.

AlertDialogDescription

Name	Type/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<any, 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.

AlertDialogFooter

No documented props

AlertDialogHeader

No documented props

AlertDialogTitle

Name	Type/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<any, 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.

AlertDialogTrigger

Name	Type/Description
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.
handle	AlertDialogHandle<unknown> | undefined A handle to associate the trigger with an alert dialog. Can be created with the AlertDialog.createHandle() method.
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 = true	boolean | undefined 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>`).
payload	unknown A payload to pass to the dialog when it is opened.
ref	((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined
render	ReactElement<any, 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.