EmptyState

Lo que se ve cuando una lista, tabla o búsqueda no tiene contenido: qué pasa y qué hacer.

Cuándo usarlo

Props. icon, title, description, actions. Icono FeaturedIcon modern gris, título text-md-semibold, descripción text-sm-regular en text-tertiary, máximo 352px de ancho.

Texto. Di por qué está vacío y ofrece la siguiente acción. Nada de "¡Ups!".

Ejemplos de la guía. "Sin resultados" con "Ningún movimiento coincide con «León». Prueba con otro término o quita filtros.", y las acciones "Limpiar búsqueda" (secundaria) y "Nuevo movimiento" (primaria).

Detalles. Sin icon, la lupa (search-lg). El título es un <h3>.

Ejemplos

Sin resultados

Ningún movimiento coincide con «León». Prueba con otro término o quita filtros.

Props

Prop	Tipo	Por defecto	Descripción
`icon`	`IconName`	`search-lg`	Icono destacado (`FeaturedIcon` modern gris de 48px).
`title`obligatoria	`ReactNode`	—	Qué pasa: "Sin resultados", "Aún no hay gastos".
`description`	`ReactNode`	—	Por qué está vacío y qué hacer. Nada de "¡Ups!".
`actions`	`ReactNode`	—	La siguiente acción: normalmente un `Button` secundario y uno primario.
`className`	`string`	—

Código

import { EmptyState } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<EmptyState
				title="Sin resultados"
				description="Ningún movimiento coincide con «León». Prueba con otro término o quita filtros."
				actions={<Button hierarchy="secondary">Limpiar búsqueda</Button>}
			/>
		</>
	);
}

---
import { EmptyState } from "@jotis-me/react";
---

<EmptyState
	title="Sin resultados"
	description="Ningún movimiento coincide con «León». Prueba con otro término o quita filtros."
	actions={<Button hierarchy="secondary">Limpiar búsqueda</Button>}
/>