React Dialog Block Confirm Delete

Confirm delete dialog with item name verification, destructive action warning, and type-to-confirm safety

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Prevent accidental deletions with confirmation. This React confirm delete dialog provides clear destructive action warnings, item name display, optional type-to-confirm verification for critical operations, and prominent cancel option. Built with shadcn/ui AlertDialog, Input, and Button components using Tailwind CSS, users must explicitly confirm destructive actions before proceeding. Review warning, confirm intent, delete safely—perfect for admin dashboards, content management systems, user account deletion, or any Next.js application where preventing accidental data loss protects users and maintains data integrity.

"use client";

import { useState } from "react";
import { Trash2, AlertTriangle, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type DeleteDialogProps = {
  itemName?: string;
  itemType?: string;
  requireConfirmation?: boolean;
};

export const title = "React Dialog Block Confirm Delete";

export default function DialogConfirmDelete({
  itemName = "Production Database",
  itemType = "database",
  requireConfirmation = true,
}: DeleteDialogProps) {
  const [open, setOpen] = useState(false);
  const [confirmText, setConfirmText] = useState("");
  const [isDeleting, setIsDeleting] = useState(false);

  const isConfirmed = !requireConfirmation || confirmText === itemName;

  const handleDelete = async () => {
    setIsDeleting(true);
    // Simulate deletion
    await new Promise((resolve) => setTimeout(resolve, 1500));
    setIsDeleting(false);
    setOpen(false);
    setConfirmText("");
  };

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);
    if (!newOpen) {
      setConfirmText("");
    }
  };

  return (
    <AlertDialog open={open} onOpenChange={handleOpenChange}>
      <div className="flex min-h-[350px] items-center justify-center">
        <AlertDialogTrigger asChild>
          <Button variant="destructive">
            <Trash2 className="mr-2 h-4 w-4" />
            Delete {itemType}
          </Button>
        </AlertDialogTrigger>
      </div>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-destructive" />
            Delete {itemType}?
          </AlertDialogTitle>
          <AlertDialogDescription className="space-y-3">
            <span className="block">
              This action cannot be undone. This will permanently delete{" "}
              <span className="font-semibold text-foreground">{itemName}</span>{" "}
              and remove all associated data from our servers.
            </span>
            {requireConfirmation && (
              <span className="block text-sm">
                Please type <span className="font-mono font-semibold text-foreground">{itemName}</span> to confirm.
              </span>
            )}
          </AlertDialogDescription>
        </AlertDialogHeader>

        {requireConfirmation && (
          <div className="space-y-2 py-2">
            <Label htmlFor="confirm-name" className="sr-only">
              Type {itemName} to confirm
            </Label>
            <Input
              id="confirm-name"
              placeholder={itemName}
              value={confirmText}
              onChange={(e) => setConfirmText(e.target.value)}
              className="font-mono"
              autoComplete="off"
              autoCorrect="off"
              spellCheck={false}
            />
          </div>
        )}

        <AlertDialogFooter>
          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
          <Button
            variant="destructive"
            onClick={handleDelete}
            disabled={!isConfirmed || isDeleting}
          >
            {isDeleting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Deleting...
              </>
            ) : (
              <>
                <Trash2 className="mr-2 h-4 w-4" />
                Delete {itemType}
              </>
            )}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

"use client";import { useState } from "react";import { Trash2, AlertTriangle, Loader2 } from "lucide-react";import { Button } from "@/components/ui/button";import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from "@/components/ui/alert-dialog";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";type DeleteDialogProps = {  itemName?: string;  itemType?: string;  requireConfirmation?: boolean;};export const title = "React Dialog Block Confirm Delete";export default function DialogConfirmDelete({  itemName = "Production Database",  itemType = "database",  requireConfirmation = true,}: DeleteDialogProps) {  const [open, setOpen] = useState(false);  const [confirmText, setConfirmText] = useState("");  const [isDeleting, setIsDeleting] = useState(false);  const isConfirmed = !requireConfirmation || confirmText === itemName;  const handleDelete = async () => {    setIsDeleting(true);    // Simulate deletion    await new Promise((resolve) => setTimeout(resolve, 1500));    setIsDeleting(false);    setOpen(false);    setConfirmText("");  };  const handleOpenChange = (newOpen: boolean) => {    setOpen(newOpen);    if (!newOpen) {      setConfirmText("");    }  };  return (    <AlertDialog open={open} onOpenChange={handleOpenChange}>      <div className="flex min-h-[350px] items-center justify-center">        <AlertDialogTrigger asChild>          <Button variant="destructive">            <Trash2 className="mr-2 h-4 w-4" />            Delete {itemType}          </Button>        </AlertDialogTrigger>      </div>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle className="flex items-center gap-2">            <AlertTriangle className="h-5 w-5 text-destructive" />            Delete {itemType}?          </AlertDialogTitle>          <AlertDialogDescription className="space-y-3">            <span className="block">              This action cannot be undone. This will permanently delete{" "}              <span className="font-semibold text-foreground">{itemName}</span>{" "}              and remove all associated data from our servers.            </span>            {requireConfirmation && (              <span className="block text-sm">                Please type <span className="font-mono font-semibold text-foreground">{itemName}</span> to confirm.              </span>            )}          </AlertDialogDescription>        </AlertDialogHeader>        {requireConfirmation && (          <div className="space-y-2 py-2">            <Label htmlFor="confirm-name" className="sr-only">              Type {itemName} to confirm            </Label>            <Input              id="confirm-name"              placeholder={itemName}              value={confirmText}              onChange={(e) => setConfirmText(e.target.value)}              className="font-mono"              autoComplete="off"              autoCorrect="off"              spellCheck={false}            />          </div>        )}        <AlertDialogFooter>          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>          <Button            variant="destructive"            onClick={handleDelete}            disabled={!isConfirmed || isDeleting}          >            {isDeleting ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Deleting...              </>            ) : (              <>                <Trash2 className="mr-2 h-4 w-4" />                Delete {itemType}              </>            )}          </Button>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-confirm-delete.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-confirm-delete.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-confirm-delete.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-confirm-delete.json

Pro block — Sign in to install

React Dialog Block Alert

Warning messages

React Dialog Block Two Actions

Confirm or cancel

React Dialog Block Success Confirmation

Deletion complete

React Dialog Block Loading

Delete progress

React Dialog Block Form

Input confirmation

React Dialog Block Settings

Account settings

Questions you might have

"use client"; import { useState } from "react"; import { Trash2, AlertTriangle, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; type DeleteDialogProps = { itemName?: string; itemType?: string; requireConfirmation?: boolean; }; export const title = "React Dialog Block Confirm Delete"; export default function DialogConfirmDelete({ itemName = "Production Database", itemType = "database", requireConfirmation = true, }: DeleteDialogProps) { const [open, setOpen] = useState(false); const [confirmText, setConfirmText] = useState(""); const [isDeleting, setIsDeleting] = useState(false); const isConfirmed = !requireConfirmation || confirmText === itemName; const handleDelete = async () => { setIsDeleting(true); // Simulate deletion await new Promise((resolve) => setTimeout(resolve, 1500)); setIsDeleting(false); setOpen(false); setConfirmText(""); }; const handleOpenChange = (newOpen: boolean) => { setOpen(newOpen); if (!newOpen) { setConfirmText(""); } }; return ( <AlertDialog open={open} onOpenChange={handleOpenChange}> <div className="flex min-h-[350px] items-center justify-center"> <AlertDialogTrigger asChild> <Button variant="destructive"> <Trash2 className="mr-2 h-4 w-4" /> Delete {itemType} </Button> </AlertDialogTrigger> </div> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle className="flex items-center gap-2"> <AlertTriangle className="h-5 w-5 text-destructive" /> Delete {itemType}? </AlertDialogTitle> <AlertDialogDescription className="space-y-3"> <span className="block"> This action cannot be undone. This will permanently delete{" "} <span className="font-semibold text-foreground">{itemName}</span>{" "} and remove all associated data from our servers. </span> {requireConfirmation && ( <span className="block text-sm"> Please type <span className="font-mono font-semibold text-foreground">{itemName}</span> to confirm. </span> )} </AlertDialogDescription> </AlertDialogHeader> {requireConfirmation && ( <div className="space-y-2 py-2"> <Label htmlFor="confirm-name" className="sr-only"> Type {itemName} to confirm </Label> <Input id="confirm-name" placeholder={itemName} value={confirmText} onChange={(e) => setConfirmText(e.target.value)} className="font-mono" autoComplete="off" autoCorrect="off" spellCheck={false} /> </div> )} <AlertDialogFooter> <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel> <Button variant="destructive" onClick={handleDelete} disabled={!isConfirmed || isDeleting} > {isDeleting ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Deleting... </> ) : ( <> <Trash2 className="mr-2 h-4 w-4" /> Delete {itemType} </> )} </Button> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> ); }

React Dialog Block Confirm Delete

Installation

Related blocks you will also like

React Dialog Block Alert

React Dialog Block Two Actions

React Dialog Block Success Confirmation

React Dialog Block Loading

React Dialog Block Form

React Dialog Block Settings

Questions you might have

When should I require type-to-confirm?

What warning information should I show?

How should the delete button look?

Should I offer undo after deletion?

How do I handle bulk deletions?

Should escape key close the dialog?