DeleteConfirmationDialog

A specialized confirmation dialog intended for delete operations. It is built on top of the Modal component and ships with a danger-colored confirm button out of the box, so you do not need to configure button colors or variants. The message supports dynamic interpolation.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the dialog is visible. | | onClose | () => void | Yes | — | Called when the dialog is dismissed (cancel button or backdrop). | | onConfirm | () => void | Yes | — | Called when the user clicks the delete button. The dialog closes automatically after this. | | title | string | No | "¿Eliminar?" | Heading displayed at the top of the dialog. | | message | string | No | "¿Estás seguro que deseas eliminar?" | Body text. Supports HTML and interpolation via interpolationData. | | confirmButtonText | string | No | "Eliminar" | Label for the delete/confirm button. | | cancelButtonText | string | No | "Cancelar" | Label for the cancel button. | | zIndex | number | No | 999 | CSS z-index of the modal overlay. | | interpolationData | Record<string, any> | No | {} | Key-value pairs used to interpolate placeholders in message. |

Usage

Basic

import React from 'react';
import DeleteConfirmationDialog from '@/components/dialogs/DeleteConfirmationDialog';

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

  const handleDelete = () => {
    console.log('Record deleted');
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Delete record</button>
      <DeleteConfirmationDialog
        isOpen={open}
        onClose={() => setOpen(false)}
        onConfirm={handleDelete}
      />
    </>
  );
}

With interpolated message

<DeleteConfirmationDialog
  isOpen={open}
  onClose={() => setOpen(false)}
  onConfirm={handleDelete}
  title="Delete product?"
  message="Are you sure you want to delete <strong>{{productName}}</strong>? This action cannot be undone."
  interpolationData={{ productName: 'Blue T-Shirt (XL)' }}
  confirmButtonText="Yes, delete"
/>