componente · @solu30/ui-kit/display
EmptyState
Estado vacío con ícono, título, mensaje y hasta dos botones de acción, en tres variantes de marco.
576 sitios de import en 10 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- carlosmartinpavon
- cmp-packages
- dietaly
- elliot
- gestorsalon
- luigi
- prepchat
- raquetea
- zentrya
El componente, montado
Cargando el espécimen…
export function EmptySpecimen() {
return (
<Stage label="EmptyState" tall>
<EmptyState
icon={IconInbox}
title="Sin reservas todavía"
description="Cuando entre la primera, aparece acá con su ficha completa."
/>
</Stage>
)
}De specimens/display.tsx · EmptySpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Cómo se usa
import { EmptyState } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| icon | opcional | IconComponent$1 | Icon component from lucide-react. Must be passed from a Client Component — function refs are NOT serializable across the RSC boundary. For Server Components use `iconName` instead. |
| iconName | opcional | IconName | Icon name string from lucide-react (e.g. "package", "inbox"). Safe to pass from Server Components. Resolved via the injected `resolveIcon` prop below — without it, `iconName` renders nothing (does not crash). Takes priority over `icon` when both are provided. ADR-192 |
| resolveIcon | opcional | (name: string) => IconComponent$1 | undefined | Resolver for `iconName` (and for `action(s).iconName`) — injected by the consumer, NEVER imported here (ADR-194). For the "any Lucide icon by name" DX, import `resolveLucideIcon` from `@solu30/ui-kit/dynamic-icon` (same isolated subpath as always) and pass it. Without `resolveIcon`, an `iconName` renders nothing — it doesn't break the layout. @example import { resolveLucideIcon } from '@solu30/ui-kit/dynamic-icon' <EmptyState iconName="package" resolveIcon={resolveLucideIcon} title="No packages" /> |
| title | sí | string | Main title text |
| message | opcional | string | Description text below title |
| description | opcional | string | Secondary description |
| action | opcional | EmptyStateAction | Single action button (legacy, use actions for multi-button) |
| actions | opcional | EmptyStateAction[] | Multiple action buttons rendered in a row |
| variant | opcional | "default" | "dashed" | "inline" | Visual variant |
| className | opcional | string | Additional CSS classes |
Ejemplo del paquete
<EmptyState
icon={Inbox}
title="Todavía no hay reservas"
message="Cuando entre la primera, aparece acá."
action={{ label: 'Crear una', onClick: crear }}
/>
// Desde un Server Component el ícono no se puede pasar como función: va por nombre.
<EmptyState iconName="inbox" resolveIcon={resolveLucideIcon} title="Sin reservas" />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.