ConfirmDialog
Confirmación de una acción con consecuencias, con el tono de su riesgo.
Usar
import { ConfirmDialog } from "@unozero-ai/ui/react";
<ConfirmDialog></ConfirmDialog>Tonos
El tono dice cuánto se arriesga: danger para lo que no se deshace (borrar, cancelar), warning para lo que se deshace pero afecta a otros (cerrar ventas), info para lo que solo conviene no hacer dos veces (reenviar). El icono y el botón de confirmar cambian juntos, y el botón va en sólido: es la única decisión de la pantalla (la Regla de una Sola Decisión). El tono confirma lo que ya dice el título; el riesgo se lee en la palabra, no solo en el color (la Regla del Tenant).
El título va en heading: title es un atributo global de HTML y pintaría el globo nativo del navegador. El diálogo se cierra solo al confirmar y al cancelar (botón, Esc o clic fuera), y avisa con onConfirm y onCancel; el onClose del kit React ya no existe.
Acción destructiva
El título pregunta por la acción y su objeto; la descripción cuenta la consecuencia, incluida la que no es obvia (el anticipo no vuelve solo). Los dos botones nombran lo que hacen: «Cancelar reserva» y «Mantener reserva», nunca «Confirmar» y «Cancelar». Es un alertdialog y el foco entra en el botón de cancelar: la salida segura queda bajo Enter.
Para una acción asíncrona, llama a preventDefault() en onConfirm, pon loading y cierra tú con open={false} al terminar. Mientras carga, el botón muestra el spinner, el de cancelar se apaga y ni Esc ni el clic fuera lo cierran. Los hijos van bajo la descripción: aquí, la opción de avisar al huésped.
Con la lista de consecuencias
Cuando la acción tiene varios efectos, ponlos en una lista como hijos: se leen de un vistazo antes de decidir. description es texto plano; cualquier bloque (listas, avisos, una casilla) va en el slot.
- El agente deja de responder en ese número.
- Las 12 conversaciones abiertas pasan a «Sin asignar».
- Las plantillas aprobadas por Meta se conservan.
Desde código: confirm()
Nuevo en el kit: await confirm({ title }) monta el diálogo en el <body>, devuelve true o false y lo quita al cerrar. Sirve desde cualquier manejador, sin estado ni elemento en el JSX. Acepta description, confirmLabel, cancelLabel y tone; aquí el título sí se llama title. Si necesitas loading o contenido bajo la descripción, usa el elemento.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).