Contenido y datosServer Component

EmptyState

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

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

Ejemplos

Los dos vacíos

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

Todavía no emitiste ninguna factura

Cuando emitas la primera, va a aparecer acá con su estado y su vencimiento.

Ninguna factura coincide con el filtro

Probá con otro rango de fechas o sacá el filtro de cliente.

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

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

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`	—

Teclado

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 Card Table