Skip to main content
A dialog component for confirming destructive actions, featuring a warning icon, clear messaging about consequences, and action buttons.

​
Installation

npx shadcn@latest add @blocks/dialog-02

​
Dependencies

This component requires the following dependencies:
  • button - shadcn/ui button component
  • dialog - shadcn/ui dialog component
  • lucide-react - Icon library (AlertTriangleIcon)

​
Usage

import Dialog02 from "@/components/dialog-02";

export default function Page() {
  return <Dialog02 />;
}

​
Features

  • Warning visual - Red alert triangle icon in circular background
  • Destructive trigger - Uses variant="destructive" for the trigger button
  • Horizontal layout - Icon and text arranged side-by-side
  • Clear consequences - Description explains what will happen
  • Dual actions - Cancel and confirm buttons in footer
  • Accessible - Proper semantic structure and ARIA attributes

​
Component Structure

The component includes:
  • Dialog wrapper with controlled state
  • DialogTrigger with destructive styling
  • DialogContent with horizontal layout using flexbox
  • Warning icon (AlertTriangleIcon) in red circular background
  • DialogHeader with title and warning description
  • DialogFooter with Cancel and Deactivate buttons
  • State management for open/close behavior
This pattern is ideal for destructive actions like account deactivation, data deletion, or other irreversible operations. Always clearly communicate the consequences to users.

Build docs developers (and LLMs) love

Get started for freeTalk to us