Badge

Etiqueta visual compacta para estados, categorías y metadatos. Siete tonos semánticos (brand, success, warning, danger, info, ink, paper) combinados con tres variantes (subtle, solid, outline) y un punto indicador de estado opcional.

brandactivobetacaídoinfoinkpaper

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Badge } from "@tsukira/ui"; <Badge tone="success" dot>Activo</Badge><Badge tone="warning" variant="solid">Beta</Badge><Badge tone="danger" variant="outline">Caído</Badge>

Ejemplos#

Playground

cambia las props y el código se regenera

Nuevo

tone

variant

size

dot

Inactivo

pill

Inactivo

children (Texto)

Tonos

brandinksuccesswarningdangerinfopaper

Variantes

subtle · solid · outline

subtlesolidoutlinesubtlesolidoutline

Con punto de estado

dot — útil para indicadores en tiempo real

OperativoDegradadoIncidenciaMantenimiento

Tamaños

smmdlg

Fusión: tabla de deploys

Badge como celda de estado en una Table

Servicio	Rama	Estado
api-gateway	main	Desplegado
auth-service	release/2.5	En curso
cdn-edge	hotfix/ssl	Fallido

Fusión: tarjeta de plan con Badge PRO

Badge como indicador de plan en una Card

Suscripción

Plan ProPRO

Acceso completo a todos los componentes del kit de diseño.

ActivoRenovación: 15 ene 2026

API#

BadgePropsextends HTMLAttributes<HTMLSpanElement>

Prop	Tipo	Default	Descripción
`tone`	`'brand' \| 'ink' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'paper'`	—	—
`variant`	`'subtle' \| 'solid' \| 'outline'`	—	—
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`dot`	`boolean`	—	Pintar un puntito a la izquierda — útil para “status badges”.
`leadingIcon`	`ReactNode`	—	—
`pill`	`boolean`	—	Pill totalmente redondeada. Por defecto true.