componente · @solu30/ui-kit/display
Badge
Etiqueta corta de estado o categoría, con trece colores, cuatro tamaños y variantes de relleno.
1.207 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 BadgeMatrix() {
return (
<Stage label="Badge · 4 estilos × 7 colores" tall wide>
<div className="flex w-full flex-col gap-2.5">
{BADGE_VARIANTS.map((v) => (
<Row key={v}>
{BADGE_COLORS.map((c) => (
<Badge key={c} color={c} variant={v} size="sm">
{c}
</Badge>
))}
</Row>
))}
</div>
</Stage>
)
}De specimens/display.tsx · BadgeMatrix: 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 { Badge } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| children | sí | ReactNode | — |
| style | opcional | CSSProperties | — |
| color | opcional | "default" | "primary" | "success" | "warning" | "error" | "info" | "purple" | "green" | "red" | "yellow" | "blue" | "cash" | "digital" | — |
| size | opcional | "xs" | "sm" | "md" | "lg" | — |
| variant | opcional | "solid" | "soft" | "tinted" | "outline" | "dot" | "default" | "secondary" | "destructive" | "ghost" | "success" | "warning" | "info" | — |
| icon | opcional | ReactNode | — |
| iconRight | opcional | ReactNode | — |
| dot | opcional | boolean | — |
| className | opcional | string | — |
Ejemplo del paquete
// Patrón del kit: color semántico + forma.
<Badge color="success" variant="soft">Confirmada</Badge>
// Patrón shadcn: el variant ES el color. No se mezclan en el mismo llamado.
<Badge variant="destructive">Cancelada</Badge>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.