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 demonstrates a nested confirmation dialog that triggers if the user attempts to discard unsaved input. To achieve the correct visual stacking effect where the parent form recedes into the background, use DialogStackedContent and AlertDialogStackedContent.

Detached triggers

If you need to trigger an alert dialog from a completely different part of the component tree, or if nesting the trigger inside the root is impractical, use createAlertDialogHandle to link a AlertDialogTrigger to a AlertDialog remotely.

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.

API Reference

Primitives

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.
`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.
`AlertDialogHeader`	Styled container for convenience purpose. Renders a `<div>` element.
`AlertDialogFooter`	Styled container for convenience purpose. Renders a `<div>` element.

Composite components

Component	Description
`AlertDialogContent`	Pre assembled component that wraps `AlertDialogPortal`, `AlertDialogBackdrop`, `AlertDialogViewport` and `AlertDialogPopup` with default styles.
`AlertDialogStackedContent`	Wraps Portal, Backdrop, Viewport and Popup with animation logic for nested "stacking" effects.