# EmptyState

> Qué se ve cuando no hay nada: ícono, título, una línea y la acción que lo arregla.

```tsx
import { EmptyState } from "sebs7n-ui/empty-state"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Los dos vacíos

«Todavía no hay nada» y «el filtro no encontró nada» no son el mismo texto.

```tsx
import { Button } from "sebs7n-ui/button"
import { EmptyState } from "sebs7n-ui/empty-state"
import { FileTextIcon, SearchXIcon } from "lucide-react"

function Basico() {
  return (
    <div className="flex w-full flex-col gap-4">
      <EmptyState
        action={<Button variant="accent">Nueva factura</Button>}
        description="Cuando emitas la primera, va a aparecer acá con su estado y su vencimiento."
        icon={<FileTextIcon />}
        title="Todavía no emitiste ninguna factura"
      />
      <EmptyState
        action={<Button variant="outline">Limpiar filtros</Button>}
        description="Probá con otro rango de fechas o sacá el filtro de cliente."
        icon={<SearchXIcon />}
        title="Ninguna factura coincide con el filtro"
      />
    </div>
  )
}
```

## Props

### EmptyState

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `title` * | `React.ReactNode` | — | — |
| `action` | `React.ReactNode` | — | Botón o link para salir del vacío. Uno solo. |
| `description` | `React.ReactNode` | — | — |
| `icon` | `React.ReactNode` | — | — |
| `titleAs` | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `"h2"` | Nivel del título. h2 por defecto (debajo del h1 del PageHeader). |
| `className` | `string` | — | — |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Llega a la acción. |

## Accesibilidad

- `titleAs` controla el nivel del heading: dentro de una página con `<h1>`, que sea `h2`.
- Es una zona hundida (`bg-background-200`), sin borde ni sombra.
- Sin `"use client"`: sirve en un Server Component.

## Reglas de uso

- **Distinguí los tres vacíos**: todavía no hay nada (con acción), el filtro no encontró nada (con «limpiar filtros») y hubo un error (con «reintentar»). No son el mismo texto.
- El título dice qué falta, no «Sin resultados».
- Una sola acción.

## Relacionados

[alert](/docs/components/alert.md) · [card](/docs/components/card.md) · [table](/docs/components/table.md)