ConfirmationDialog

A lightweight confirmation dialog built on top of the Modal component. It presents a title, an interpolatable message, and two configurable buttons — one to confirm and one to cancel. Calling onConfirm automatically closes the dialog afterward.

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 confirm button. The dialog closes automatically after this. | | title | string | No | "¿Confirmar?" | Heading displayed at the top of the dialog. | | message | string | No | "¿Estás seguro?" | Body text. Supports HTML and interpolation via interpolationData. | | confirmButtonText | string | No | "Confirmar" | Label for the 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. | | confirmButtonType | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the confirm button. | | confirmButtonColor | string | No | themeColors.primary | Color applied to the confirm button. | | cancelButtonType | "clear" \| "outline" \| "solid" | No | "outline" | Visual variant of the cancel button. | | cancelButtonColor | string | No | themeColors.medium | Color applied to the cancel button. | | confirmButtonIcon | string | No | — | Icon name rendered at the end of the confirm button. | | cancelButtonIcon | string | No | — | Icon name rendered at the end of the cancel button. | | windowStyle | React.CSSProperties | No | — | Additional inline styles merged into the dialog window. |

Usage

Basic

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

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Open dialog</button>
      <ConfirmationDialog
        isOpen={open}
        onClose={() => setOpen(false)}
        onConfirm={() => console.log('Confirmed!')}
        title="Save changes?"
        message="Your unsaved changes will be permanently saved."
      />
    </>
  );
}

With interpolation

<ConfirmationDialog
  isOpen={open}
  onClose={() => setOpen(false)}
  onConfirm={handleConfirm}
  title="Archive record"
  message="You are about to archive <strong>{{name}}</strong>. Continue?"
  interpolationData={{ name: 'Invoice #1042' }}
  confirmButtonText="Archive"
  confirmButtonColor="#e67e22"
/>