Todos los componentes (204)

Confirmar acción

Capas · ConfirmAction

Qué es y cuándo usarlo

La pregunta de seguridad pegada al botón que la provoca: «¿Borrar el pedido 1042?» con dos salidas, sin tapar la página. Es el escalón de abajo de Dialog.

Cuándo usarlo

Borrar una fila, dar de baja, un envío que no se puede repetir. trigger es el botón y question la pregunta.
tone es el del botón de confirmar: error (rojo, por defecto) para lo que destruye; accent para confirmar algo que no destruye nada. confirmText y cancelText cambian los textos de los dos botones.
Si onConfirm devuelve una promesa, el globo se queda abierto con el botón en marcha hasta que acaba; si falla, lo dice ahí mismo y no se cierra. Un borrado que no se ha hecho no puede parecer hecho.

Cuándo no

Si para decidir hay que leer algo largo, elegir entre varias cosas o escribir: Dialog.
Preguntar desde código, sin un botón al que pegarse: useConfirmation (con ConfirmProvider).
Algo que se deshace fácil: mejor hacerlo y ofrecer «Deshacer» en una notificación (useNotifications).

Teclado: el disparador se pulsa con Intro o Espacio. Al abrir, el foco arranca en Cancelar a propósito: pulsar Intro por inercia no hace nada. Escape cierra sin hacer nada. Al confirmar, el globo se cierra y el foco vuelve al botón.

Accesibilidad: es un alertdialog con la pregunta como nombre; el detail (y el fallo, si lo hay) se leen como su descripción. Mientras trabaja, Cancelar se apaga y el botón de confirmar deja de responder y anuncia «Trabajando». Un fallo sin texto se cuenta con un mensaje genérico («No se ha podido completar la acción»), nunca con un hueco en blanco.

Aspecto fino: sin variables propias. Se ajusta con las clases amset-confirm__* y la de todos los flotantes, amset-floating.

Cómo se ve

<ConfirmAction
  trigger={<Button variant="outline" tone="error">Borrar el pedido</Button>}
  question="Borrar el pedido 1042?"
  detail="Se pierden las tres lineas y el aviso a la clienta."
  confirmText="Borrar"
  onConfirm={borrar}
/>

Props

Se importa con import { ConfirmAction } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`onConfirm`obligatoria	`() => void \| Promise<void>`	La accion. Si devuelve una promesa, el globo se queda abierto con el boton en marcha hasta que acabe, y si falla lo dice ahi mismo sin cerrarse: un borrado que no se ha hecho no puede parecer hecho.
`question`obligatoria	`string`	La pregunta, corta y en positivo: «¿Borrar el pedido 1042?».
`trigger`obligatoria	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Lo que dispara la confirmacion. Tiene que ser enfocable: un boton.
`cancelText`	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`confirmText`	`string`	—
`detail`	`string`	Lo que hay que saber antes de decidir: que se pierde, a quien afecta.
`placement`	`Placement`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	El tono del boton de confirmar. Por defecto `error` (rojo): esto se usa sobre todo para borrar y dar de baja. Para confirmar algo que no destruye nada, `accent`.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: