componente · @solu30/ui-kit/display

StatusBadge

Badge que resuelve color y texto desde un mapa de estados, con nueve estados de fábrica.

46 sitios de import en 9 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

EasyYachts
TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
easycharter
elliot
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function StatusSpecimen() {
  return (
    <Stage label="StatusBadge">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <StatusBadge status="active" size="sm" />
        <StatusBadge status="pending" size="sm" />
        <StatusBadge status="cancelled" size="sm" />
        <StatusBadge status="draft" size="sm" isLoading />
      </div>
    </Stage>
  )
}

De specimens/display.tsx · StatusSpecimen: 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 { StatusBadge } from '@solu30/ui-kit/display'

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
status	sí	`string`	Status key (matches a key in statusConfig or a built-in status)
statusConfig	opcional	`Record<string, StatusConfig>`	Custom status configuration mapping status keys to colors and labels
size	opcional	`'sm' \| 'md' \| 'lg'`	Badge size
className	opcional	`string`	Additional CSS class
icon	opcional	`React__default.ReactNode`	Optional icon rendered before the label text
isLoading	opcional	`boolean`	When true, replaces the icon with an animated spinner
onClick	opcional	`() => void`	When provided, renders the badge as a button with cursor-pointer and hover state

Ejemplo del paquete

// Sin `statusConfig` usa los estados que ya trae. El mapa se pasa cuando el dominio
// tiene los suyos, y es lo que decide color Y etiqueta visible.
<StatusBadge
  status="confirmada"
  statusConfig={{ confirmada: { color: 'bg-ui-success/15', textColor: 'text-ui-success', label: 'Confirmada' } }}
/>

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.