Todos los componentes (204)
Proveedor de confirmación
Capas · ConfirmProvider
Qué es y cuándo usarlo
Preguntar «¿seguro?» desde cualquier componente sin montar un diálogo y su estado en cada pantalla. Se pone una vez, arriba del árbol (AmsetProvider ya lo trae), y desde dentro:
const { confirm } = useConfirmation()
if (await confirm({ title: '¿Borrar el pedido 1042?' })) await borrar()Cuándo usarlo
- Confirmar una acción que se lanza desde código: una opción de menú, un atajo, la acción de una fila.
- La promesa responde
truesolo al confirmar. Cancelar respondefalse, y también desmontar el proveedor o pedir otra confirmación con una abierta (la primera se da por cancelada): elawaitde quien preguntaba nunca se queda colgado. tonees el del vocabulario común y va al botón de confirmar, como enConfirmAction:'error'(por defecto) para lo que borra;'accent'para lo que no destruye nada.confirmTextycancelTextcambian los textos de los botones («Confirmar» y «Cancelar» de serie).
Cuándo no
- La pregunta pegada al botón que la provoca, sin tapar la página:
ConfirmAction. - Si antes de decidir hay que leer algo largo, elegir o escribir: un
Dialogcon lo que haga falta dentro. - Dentro de
AmsetProviderno hace falta ponerlo otra vez (withoutConfirmlo quita, si la aplicación trae el suyo).
Teclado: es un <dialog> modal: al abrir, el foco entra en él y no sale mientras está abierto. Es un alertdialog: pulsar fuera no lo cierra, y Escape es cancelar (responde false), como pide el patrón de WAI-ARIA. Tab pasa entre Cancelar y Confirmar; Intro o Espacio pulsan.
Accesibilidad: el diálogo se anuncia como alertdialog con title como nombre y description como descripción. Con uno de los cuatro que avisan ('error', el de serie, 'warning', 'info' u 'success') la cabecera lleva su icono y el botón de confirmar va en ese color; con 'accent' o 'neutral', sin icono. No hay cuerpo vacío: la pregunta va en el título y el detalle en la descripción.
Aspecto fino: sin variables propias. Es un Dialog de kind="alert": se ajusta con sus clases, amset-dialog__*.
Cómo se ve
La pregunta sale de un hook, sin montar un diálogo en esta pantalla.
<ConfirmProvider>
<App />
</ConfirmProvider>
// Dentro:
const { confirm } = useConfirmation()
const seguro = await confirm({
title: 'Dar de baja a Distribuciones Sur?',
description: 'Deja de recibir pedidos y facturas.',
confirmText: 'Dar de baja',
})Props
Se importa con import { ConfirmProvider } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
childrenobligatoria | ReactNode | — |
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech:
