Todos los componentes (204)

Estado vacío

Superficies · EmptyState · .amset-empty

Qué es y cuándo usarlo

El hueco cuando no hay nada que enseñar. Nunca se queda en «No hay datos»: dice por qué está vacío y qué se puede hacer, porque un vacío sin salida parece una pantalla rota.

Cuándo usarlo

Una lista, una tabla o un panel que todavía no tiene nada, con la action que crea el primero.
La respuesta a una búsqueda o a un filtro sin resultados: con announce, para que se lea al aparecer, y una acción para quitar los filtros.
size: sm (y withoutIcon) para huecos pequeños dentro de una tarjeta, lg cuando el vacío ocupa la pantalla.
align="start" en un panel lateral o una columna, donde el texto centrado queda suelto.
tone colorea el círculo del icono: neutral por defecto, porque un vacío no es una alarma. icon cambia el dibujo.

Cuándo no

Lo que queda después de una acción (pago hecho, pago rechazado, 404): Result.
Mientras carga: Skeleton. Un vacío que aparece antes de tiempo dice que no hay nada cuando sí lo hay.
Un problema dentro de una pantalla que sigue funcionando: Alert.

Teclado: el hueco no es enfocable; los botones de action y secondary tienen su propia parada de Tab.

Accesibilidad: el título es un encabezado de verdad, h3 por defecto (headingLevel lo ajusta al sitio donde va). El icono es decorativo. Con announce el bloque es role="status" y se lee al aparecer; sin él no se anuncia, porque un hueco de siempre no es una noticia.

Aspecto fino: variables CSS --amset-empty-*: -padding-block, -padding-line, -slot, -icon (el lado del círculo), -icon-drawing, -title, -font y -width (lo más que mide la descripción: 38ch, 44ch en lg). Aparece con un fundido corto, que se quita con movimiento reducido.

Cómo se ve

Ningún pedido con esos filtros

Prueba a quitar el rango de fechas o a buscar por otro estado.

<EmptyState
  title="Ningun pedido con esos filtros"
  description="Prueba a quitar el rango de fechas o a buscar por otro estado."
  action={<Button variant="outline">Quitar filtros</Button>}
/>

Props

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

Prop	Tipo	Para qué sirve
`title`obligatoria	`string`	—
`action`	`ReactNode`	Boton principal: crear el primer elemento, quitar los filtros.
`align`	`EmptyStateAlignment`	`start` para un panel lateral o una columna, donde el texto centrado queda suelto.
`announce`	`boolean`	Lo anuncia al aparecer. Para cuando el hueco es la respuesta a algo que ha hecho la persona (buscar, filtrar): si no, el resultado de su busqueda ocurre en silencio.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`description`	`ReactNode`	—
`headingLevel`	`EmptyStateHeadingLevel`	—
`icon`	`ReactNode`	Icono propio. Decorativo: lo que cuenta es el titulo.
`secondary`	`ReactNode`	—
`size`	`"sm" \| "md" \| "lg"`	`sm` dentro de una tarjeta o una fila; `lg` cuando ocupa la pantalla.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Color del circulo del icono. Por defecto, `neutral`: un vacio no es una alarma.
`withoutIcon`	`boolean`	Sin icono, para huecos pequeños dentro de una tarjeta.

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-empty-padding-block`	`var(--amset-space-8)`
`--amset-empty-padding-line`	`var(--amset-space-5)`
`--amset-empty-slot`	`var(--amset-space-2)`
`--amset-empty-icon`	`3rem`
`--amset-empty-icon-drawing`	`1.5rem`
`--amset-empty-title`	`var(--amset-text-lg)`
`--amset-empty-font`	`var(--amset-text-base)`
`--amset-empty-width`	`38ch`
`--amset-empty-icon-background`	`var(--amset-divider)`
`--amset-empty-icon-ink`	`var(--amset-ink-2)`

Cómo se cambia

.amset-empty {
  --amset-empty-padding-block: ...;
  --amset-empty-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: