ConfirmationDialog

Diálogo de confirmación liviano construido sobre el componente Modal. Muestra un título, un mensaje interpolable y dos botones configurables — uno para confirmar y otro para cancelar. Al hacer clic en confirmar, el diálogo se cierra automáticamente.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el diálogo está visible. | | onClose | () => void | Sí | — | Se llama cuando el diálogo se cierra (botón cancelar o backdrop). | | onConfirm | () => void | Sí | — | Se llama cuando el usuario hace clic en confirmar. El diálogo se cierra automáticamente después. | | title | string | No | "¿Confirmar?" | Encabezado mostrado en la parte superior del diálogo. | | message | string | No | "¿Estás seguro?" | Texto del cuerpo. Admite HTML e interpolación mediante interpolationData. | | confirmButtonText | string | No | "Confirmar" | Etiqueta del botón de confirmación. | | cancelButtonText | string | No | "Cancelar" | Etiqueta del botón de cancelación. | | zIndex | number | No | 999 | z-index CSS del overlay modal. | | interpolationData | Record<string, any> | No | {} | Pares clave-valor para interpolar marcadores en message. | | confirmButtonType | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón de confirmación. | | confirmButtonColor | string | No | themeColors.primary | Color del botón de confirmación. | | cancelButtonType | "clear" \| "outline" \| "solid" | No | "outline" | Variante visual del botón de cancelación. | | cancelButtonColor | string | No | themeColors.medium | Color del botón de cancelación. | | confirmButtonIcon | string | No | — | Nombre del ícono al final del botón de confirmación. | | cancelButtonIcon | string | No | — | Nombre del ícono al final del botón de cancelación. | | windowStyle | React.CSSProperties | No | — | Estilos en línea adicionales para la ventana del diálogo. |

Uso

Básico

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."
      />
    </>
  );
}

Con interpolación

<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"
/>