Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation


pnpm dlx shadcn@latest add @lumi-ui/alert-dialog

Basic Usage

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Show Alert Dialog</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogClose>Cancel</AlertDialogClose>
          <AlertDialogClose>Continue</AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Anatomy

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Cookbook

Control the dialog state and open it imperatively using the onClick handler on the DropdownMenuItem.

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.

Detached triggers

An alert dialog can be controlled by a trigger located either inside or outside the <AlertDialog> component. For simple, one-off interactions, place the <AlertDialogTrigger> inside <AlertDialog>, as shown in the demo example.

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 <AlertDialogTrigger> outside of <AlertDialog> and linking them with a handle created by the createAlertDialogHandle function.

const deleteAlertHandle = createAlertDialogHandle();

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

Multiple triggers within the Root part

<AlertDialogRoot>
  <AlertDialogTrigger>Trigger 1</AlertDialogTrigger>
  <AlertDialogTrigger>Trigger 2</AlertDialogTrigger>
  ...
</AlertDialogRoot>

Multiple detached triggers

const demoAlertDialog = createAlertDialogHandle();
 
<AlertDialogTrigger handle={demoAlertDialog}>Trigger 1</AlertDialogTrigger>
<AlertDialogTrigger handle={demoAlertDialog}>Trigger 2</AlertDialogTrigger>
<AlertDialog handle={demoAlertDialog}>
  ...
</AlertDialog>

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

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

Controlled mode with multiple triggers

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

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.

Create your own

Most of the time, you can use AlertDialogContent directly, which wraps AlertDialogPortal, AlertDialogViewport, AlertDialogBackdrop and AlertDialogPopup. However, you can also customize your own by using the primitives to give a unique look that fits your design, all styles can be overwritten.

Note

AlertDialogPopup requires AlertDialogPortal to be its parent.

API Reference

Component	Description
`AlertDialog`	Groups all parts of the alert dialog. Doesn’t render its own HTML element.
`AlertDialogTrigger`	A button that opens the alert dialog. Renders a `<button>` element.
`AlertDialogPortal`	A portal element that moves the popup to a different part of the DOM. Renders a `<div>` element.
`AlertDialogViewport`	A positioning container for the dialog popup that can be made scrollable. Renders a `<div>` element.
`AlertDialogPopup`	A container for the alert dialog contents. Must be used inside `AlertDialogPortal`. Renders a `<div>` element.
`AlertDialogBackdrop`	An overlay displayed beneath the popup. Renders a `<div>` element.
`AlertDialogContent`	Pre assembled component that wraps `AlertDialogPortal`, `AlertDialogBackdrop`, `AlertDialogViewport` and `AlertDialogPopup` with default styles.
`AlertDialogHeader`	Styled container for convenience purpose.
`AlertDialogFooter`	Styled container for convenience purpose.
`AlertDialogTitle`	A heading that labels the dialog. Renders an `<h2>` element.
`AlertDialogDescription`	A paragraph with additional information about the alert dialog. Renders a `<p>` element.
`AlertDialogClose`	A button that closes the alert dialog. Renders a `<button>` element. Renders a `<button>` element.

Migration Guide

Trigger Composition (render prop)

Radix UI uses the asChild pattern to merge the trigger logic with a child element. Base UI uses the render prop for changing HTML tags or using custom triggers.

// Before:
<DialogTrigger asChild>
  <Button>Open</Button>
</DialogTrigger>
 
// After:
<DialogTrigger render={<Button>Open</Button>} />

Warning

Switch to using the render prop instead of asChild.

Cancel and Action button

AlertDialogCancel and AlertDialogAction are replaced with AlertDialogClose.

Example

alert-dialog-demo.tsx

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogClose,
} from "@/components/ui/alert-dialog"
 
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Info

DialogContent wraps the popup in a specific structure: Portal > Backdrop > Viewport > Popup. If you need a custom layout, simpler usage is to use the primitives directly instead of the pre-assembled DialogContent.