React Dialog Block Destructive Warning

Destructive action warning dialog with alert icon, horizontal layout, and cancel/confirm buttons

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Handle dangerous actions safely. This React warning dialog displays a destructive action confirmation with red alert icon, warning message, and cancel/confirm button pair. Built with shadcn/ui Dialog, Button components with destructive variant and Lucide React AlertTriangle icon, users must explicitly confirm irreversible actions like account deactivation, data deletion, or subscription cancellation. Horizontal icon-content layout, clear warning copy, and prominent cancel option—perfect for settings pages, admin panels, or any app where preventing accidental destructive actions protects user data and trust.

"use client";

import { useState } from "react";
import { AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export const title = "React Dialog Block Destructive Warning";

export default function DialogWarning() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="destructive">Deactivate</Button>
        </DialogTrigger>
      </div>
      <DialogContent style={{ maxWidth: "384px" }}>
        <DialogHeader>
          <div className="flex items-center gap-3">
            <AlertTriangle className="h-5 w-5 text-destructive shrink-0" />
            <DialogTitle>Deactivate account</DialogTitle>
          </div>
          <DialogDescription className="pt-2">
            Are you sure? All of your data will be permanently removed. This
            action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button
            variant="destructive"
            className="text-white"
            onClick={() => setOpen(false)}
          >
            Deactivate
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { AlertTriangle } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";export const title = "React Dialog Block Destructive Warning";export default function DialogWarning() {  const [open, setOpen] = useState(false);  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="destructive">Deactivate</Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        <DialogHeader>          <div className="flex items-center gap-3">            <AlertTriangle className="h-5 w-5 text-destructive shrink-0" />            <DialogTitle>Deactivate account</DialogTitle>          </div>          <DialogDescription className="pt-2">            Are you sure? All of your data will be permanently removed. This            action cannot be undone.          </DialogDescription>        </DialogHeader>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Cancel          </Button>          <Button            variant="destructive"            className="text-white"            onClick={() => setOpen(false)}          >            Deactivate          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

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

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

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

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

Pro block — Sign in to install

React Dialog Block Destructive Warning

Installation

React Dialog Block Success Confirmation

React Dialog Block Password Confirm

React Dialog Block Edit Profile Form

React Dialog Block Two Actions

React Dialog Block Create Workspace

React Dialog Block Report Content

Questions you might have

React Dialog Block Destructive Warning

Installation

Related blocks you will also like

React Dialog Block Success Confirmation

React Dialog Block Password Confirm

React Dialog Block Edit Profile Form

React Dialog Block Two Actions

React Dialog Block Create Workspace

React Dialog Block Report Content

Questions you might have

How do I add extra confirmation for dangerous actions?

Should destructive actions have an undo option?

Why use red styling for destructive dialogs?

How should I write destructive action copy?

Which button should have default focus?

How do I handle the destructive action API call?