Alert Dialog

Component 8

About

A confirmation dialog for destructive or informational actions, with cancel/confirm buttons and an icon, built on React Aria's accessible dialog primitive.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Alert Dialog to your project and fits it to your theme.

Code

How Alert Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { AlertDialog } from "@/components/ui/tailwind-alertdialog";
import { Button } from "@/components/ui/tailwind-alertdialog-utils/button";
import { DialogTrigger, Modal, ModalOverlay } from "react-aria-components";

export default function AlertDialogDemo() {
  return (
    <div className="flex items-center justify-center p-12">
      <DialogTrigger>
        <Button variant="destructive">Delete…</Button>
        <ModalOverlay
          className={({ isEntering, isExiting }) => `
            fixed inset-0 z-10 overflow-y-auto bg-black/25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
            ${isEntering ? "animate-in fade-in duration-300 ease-out" : ""}
            ${isExiting ? "animate-out fade-out duration-200 ease-in" : ""}
          `}
        >
          <Modal
            className={({ isEntering, isExiting }) => `
              w-full max-w-md overflow-hidden rounded-2xl bg-white dark:bg-neutral-900 p-6 text-left align-middle shadow-xl
              ${isEntering ? "animate-in zoom-in-95 ease-out duration-300" : ""}
              ${isExiting ? "animate-out zoom-out-95 ease-in duration-200" : ""}
            `}
          >
            <AlertDialog
              title="Delete folder"
              variant="destructive"
              actionLabel="Delete"
              cancelLabel="Cancel"
              onAction={() => {}}
            >
              Are you sure you want to delete "Documents"? All contents will be
              permanently destroyed.
            </AlertDialog>
          </Modal>
        </ModalOverlay>
      </DialogTrigger>
    </div>
  );
}