componente · @solu30/ui-kit/display
EmptyState
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
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 |