CentercodeDitto
DittoPorygonAPI

DeleteConfirmDialog

Confirmation dialog for delete operations with simple and strong variants

Overview

DeleteConfirmDialog provides a standardized confirmation dialog for delete operations. It supports two variants: simple (one-click confirm) and strong (type-to-confirm) for high-risk deletions like programs or resources with dependencies.

Key Features

  • Two variants: simple (quick confirmation) and strong (type-to-confirm)
  • Configurable item name and type for contextual messaging
  • Built-in loading state during async delete operations
  • Automatic input reset when dialog closes

Examples

Simple Variant

Use for low-risk deletions where a simple confirmation is sufficient.

Strong Variant (Type to Confirm)

Use for high-risk deletions (programs, projects, bulk operations). Requires typing the item name to confirm.

Custom Description

Override the default description with custom messaging.

With Loading State

Demonstrates the isDeleting prop for showing loading state during async operations.

Props Reference

PropTypeDefaultDescription
openboolean-Whether the dialog is open
onOpenChange(open: boolean) => void-Callback when open state changes
itemNamestring-The name of the item being deleted (shown in title)
itemTypestring-Type of item for context (e.g., 'program', 'project')
descriptionstring-Custom description (overrides default)
variant"simple" | "strong""simple"Dialog variant: 'simple' or 'strong'
onConfirm() => void | Promise<void>-Callback when user confirms deletion
isDeletingbooleanfalseWhether delete operation is in progress

Usage

import { DeleteConfirmDialog } from '@/ui/components';
import { useState } from 'react';

const [open, setOpen] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);

const handleDelete = async () => {
  setIsDeleting(true);
  try {
    await deleteResource(resourceId);
    toast.success('Resource deleted');
    setOpen(false);
  } finally {
    setIsDeleting(false);
  }
};

// Simple variant (one-click confirm)
<DeleteConfirmDialog
  open={open}
  onOpenChange={setOpen}
  itemName="Weekly Report"
  itemType="resource"
  onConfirm={handleDelete}
  isDeleting={isDeleting}
/>

// Strong variant (type to confirm)
<DeleteConfirmDialog
  open={open}
  onOpenChange={setOpen}
  itemName="Production Program"
  itemType="program"
  variant="strong"
  onConfirm={handleDelete}
  isDeleting={isDeleting}
/>

// With custom description
<DeleteConfirmDialog
  open={open}
  onOpenChange={setOpen}
  itemName="User Account"
  itemType="account"
  description="This will permanently delete all data."
  onConfirm={handleDelete}
/>