Todos los componentes (204)

Resultado

Superficies · Result · .amset-result

Qué es y cuándo usarlo

La pantalla de después: pago hecho, pago rechazado, cuenta creada, página no encontrada. Es el final de algo que acaba de pasar, ocupa el hueco principal y siempre ofrece por dónde seguir.

Cuándo usarlo

Al terminar algo: pagar, enviar un formulario, borrar, darse de alta.
tone dice cómo ha ido: success (por defecto), error, warning o info; cada uno trae su icono, y icon pone uno propio.
title y description cuentan qué ha pasado.
action para la salida principal («Ver el pedido», «Reintentar el pago») y secondary para la otra.
size: sm dentro de un panel o de un diálogo, lg cuando es la pantalla entera.
detail para lo que se copia en un correo a soporte: el número de pedido, la referencia de un fallo.

Cuándo no

Una banda dentro de una pantalla que sigue funcionando: Alert.
Una lista que todavía no tiene nada: EmptyState.
Una confirmación de paso que se va sola: una notificación con useNotifications.

Teclado: no es enfocable; los botones de action y secondary tienen su propia parada de Tab. El componente no mueve el foco.

Accesibilidad: por defecto se anuncia al aparecer (role="status"), con el tono escrito delante del título y oculto a la vista: «Error: Pago rechazado». El prefijo va fuera del encabezado, así que al navegar por encabezados se sigue llamando «Pago rechazado» a secas. announce={false} cuando el resultado ya estaba en la página al cargarla. El título es h2 por defecto (headingLevel, de 1 a 4). El icono es decorativo.

Aspecto fino: variables CSS --amset-result-*: -padding-block, -padding-line, -icon (el lado del círculo), -icon-drawing, -title, -font y -width (lo más que miden la descripción y el detalle: 34rem, 38rem en lg); los colores del icono, en -tone y -tone-soft. El icono entra creciendo desde el centro; con movimiento reducido aparece sin más.

Cómo se ve

Hecho:

Pedido confirmado

Te hemos mandado el resguardo por correo.

<Result
  title="Pedido confirmado"
  description="Te hemos mandado el resguardo por correo."
  tone="success"
  action={<Button variant="solid">Ver el pedido</Button>}
/>

Props

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

Prop	Tipo	Para qué sirve
`title`obligatoria	`string`	—
`action`	`ReactNode`	Boton principal: volver al pedido, reintentar el pago, ir al inicio.
`announce`	`boolean`	Lo anuncia al aparecer. Puesto por defecto: un resultado sale justo despues de que alguien haya hecho algo (pagar, enviar, borrar) y enterarse de como ha acabado no puede depender de ver un icono verde.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`description`	`ReactNode`	—
`detail`	`ReactNode`	Debajo de los botones: el numero de pedido, el detalle tecnico de un fallo.
`headingLevel`	`ResultHeadingLevel`	—
`icon`	`ReactNode`	Icono propio. Decorativo: lo que cuenta es el titulo.
`secondary`	`ReactNode`	—
`size`	`"sm" \| "md" \| "lg"`	`sm` dentro de un panel o un dialogo; `lg` cuando es la pantalla entera.
`tone`	`"info" \| "success" \| "warning" \| "error"`	Como ha acabado: uno de los tonos de estado. Pinta el icono. Por defecto, `success`.

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-result-padding-block`	`var(--amset-space-8)`
`--amset-result-padding-line`	`var(--amset-space-5)`
`--amset-result-icon`	`3.5rem`
`--amset-result-icon-drawing`	`1.75rem`
`--amset-result-title`	`var(--amset-text-xl)`
`--amset-result-font`	`var(--amset-text-base)`
`--amset-result-width`	`34rem`
`--amset-result-tone`	`var(--amset-success)`
`--amset-result-tone-soft`	`var(--amset-success-soft)`

Cómo se cambia

.amset-result {
  --amset-result-padding-block: ...;
  --amset-result-padding-line: ...;
}

En el banco de pruebas

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