Empty state
BetaExplica por qué no hay nada que mostrar y qué se puede hacer.
registry/ds/empty-state.tsxNo encontramos materias con ese nombre
Probá con otra palabra, o quitá los filtros de carrera y semestre.
import { Button } from "@/registry/ds/button";
import { EmptyState } from "@/registry/ds/empty-state";
import { Plus, Search } from "@/registry/ds/icons";
export default function EmptyStateBasic() {
return (
<div className="w-full max-w-xl rounded-2xl border border-border">
<EmptyState
icon={<Search />}
title="No encontramos materias con ese nombre"
description="Probá con otra palabra, o quitá los filtros de carrera y semestre."
actions={
<>
<Button variant="stroke">Quitar filtros</Button>
<Button iconLeft={<Plus />}>Proponer una materia</Button>
</>
}
/>
</div>
);
}Cuándo usarlo
Ocupa el lugar del contenido cuando no hay contenido. Tres situaciones, tres mensajes distintos:
| Situación | Título | Acción |
|---|---|---|
| Primera vez, todo vacío | Qué va a haber acá y para qué sirve. | Crear lo primero. |
| Búsqueda o filtro sin resultados | Qué se buscó y que no hubo coincidencias. | Quitar filtros, cambiar la búsqueda. |
| Error al cargar | Qué falló, sin culpar. | Reintentar. |
Tres situaciones
No es lo mismo no tener nada todavía, no encontrar nada, o no poder cargar. El icono, el título y la acción cambian con la causa.
Todavía no tenés materias
Cuando te inscribas, acá vas a ver horarios, notas y avisos.
Sin resultados para «quimica»
Revisá la ortografía o probá con menos palabras.
No pudimos cargar tus materias
Puede ser la conexión. Tus datos no se perdieron.
import { Button } from "@/registry/ds/button";
import { EmptyState } from "@/registry/ds/empty-state";
import { AlertCircle, BookOpen, Plus, Search } from "@/registry/ds/icons";
/** Tres situaciones distintas, tres textos distintos: primer uso (invita), sin resultados (sugiere) y error (explica y reintenta) */
export default function EmptyStateVariants() {
return (
<div className="grid w-full gap-4 lg:grid-cols-3">
<div className="rounded-2xl border border-border bg-bg">
<EmptyState size="sm" icon={<BookOpen />} title="Todavía no tenés materias" description="Cuando te inscribas, acá vas a ver horarios, notas y avisos." actions={<Button size="sm" iconLeft={<Plus />}>Inscribirme</Button>} />
</div>
<div className="rounded-2xl border border-border bg-bg">
<EmptyState size="sm" icon={<Search />} title="Sin resultados para «quimica»" description="Revisá la ortografía o probá con menos palabras." actions={<Button size="sm" variant="stroke">Quitar filtros</Button>} />
</div>
<div className="rounded-2xl border border-border bg-bg">
<EmptyState size="sm" icon={<AlertCircle />} title="No pudimos cargar tus materias" description="Puede ser la conexión. Tus datos no se perdieron." actions={<Button size="sm" variant="stroke">Reintentar</Button>} />
</div>
</div>
);
}Contenido
- Título: una oración, en positivo. "Todavía no tenés materias" mejor que "Sin materias".
- Descripción: el siguiente paso, no una disculpa.
- Una acción principal, y una secundaria como mucho.
- El icono refuerza la situación (lupa para búsqueda, más para crear). Una ilustración solo en el estado de primera vez.
| Size | Padding | Icono | Título |
|---|---|---|---|
sm | 32 × 16 | 40 (glifo 20) | Text md / Semibold |
md | 48 × 24 | 48 (glifo 24) | Text lg / Semibold |
Texto centrado, ancho máx. 360. Gap 16 entre bloques.
| Parte | Propiedad | Token |
|---|---|---|
| Icono | Fondo | primary/subtle |
| Icono | Glifo | primary/accent |
| Título | Color | text/default |
| Descripción | Color | text/muted |
Instalación
npx shadcn@latest add https://polen.cdc.cool/r/empty-state.jsonPlayground
Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.
No encontramos materias con ese nombre
Probá con otra palabra, o quitá los filtros de carrera y semestre.
size
Acciones
<EmptyState icon={<Search />} title="No encontramos materias con ese nombre" description="Probá con otra palabra, o quitá los filtros de carrera y semestre." actions={<><Button variant="stroke">Quitar filtros</Button><Button iconLeft={<Plus />}>Proponer una materia</Button></>} />| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title | ReactNode | — | Requerido. |
description | ReactNode | — | El siguiente paso. |
icon | ReactNode | — | Se pinta en el círculo. |
illustration | ReactNode | — | Reemplaza al icono. Máx. 160 de alto. |
actions | ReactNode | — | Uno o dos Button. |
size | "sm" | "md" | "md" | sm para paneles y cards. |
- El título es un heading (
h3): elegí el nivel según dónde vive. - El icono es decorativo; la ilustración también, salvo que informe algo.
- Si reemplaza una lista que estaba cargando, quitá
aria-busydel contenedor al mostrarlo.