Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ephraimduncan/blocks/llms.txt

Use this file to discover all available pages before exploring further.

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.