0255
Indicators Creacion Revision

Badge · etiqueta de estado

Publicado
Lectura
3 min

El Badge es la etiqueta corta. Comunica estado, conteo, categoría o tag, en menos de tres palabras. No es interactivo (si lo es, es Button). No es decorativo (si lo es, sobra). Esta ficha documenta las tres semánticas del Badge y dónde sus tres semánticas se separan visualmente.

Decomposición del componente

Las seis capas del componente

01 · Átomo color.neutral.200 · color.accent.green · color.accent.amber · color.red.500 · space.2 · space.4 · radius.xs

Primitivos. Los tres colores semánticos de severidad son los únicos accent adicionales al rojo que el sistema admite, solo dentro de Badge.

02 · Compuesto color.badge.bg.neutral · color.badge.bg.success · color.badge.bg.warning · color.badge.bg.danger · color.badge.bg.brand · space.badge.padding

Enum cerrado sobre seis variants: neutral, info, success, warning, danger, brand.

03 · Regla restricción semántica enum · regla texto+color (nunca solo color) · schema con label obligatorio

Governance. La WCAG SC 1.4.1 Use of Color se enforcca por policy: sin label, Badge rechazado.

04 · Pieza <Badge variant='success' label='Activo' />

Schema con enum cerrado. Sin prop label, rechazo OPA.

05 · Familia Indicators · sibling de Tag (Chip interactivo), Tooltip, Toast

Badge es pasivo; Tag es interactivo (dismissible); Tooltip y Toast son overlays efímeros.

06 · Estado default · with-icon · with-count · agent-aware

Sin estados interactivos. Badge no se hover, no se focuse, no se pulsa.

Tokens consumidos

Semánticos

color.badge.bg.neutral oklch(0.92 0.005 75)

Fondo neutro, default

color.badge.bg.success oklch(0.85 0.08 145)

Fondo verde para estados positivos confirmados

color.badge.bg.warning oklch(0.88 0.1 80)

Fondo ámbar para estados intermedios

color.badge.bg.danger oklch(0.85 0.1 28)

Fondo rojo claro para estados destructivos o errores

space.badge.padding 0.125rem 0.5rem

Padding compacto, badge nunca debe sentirse como botón

Técnicas de governance aplicadas

Técnicas activas

Restricción semántica enum

Herramienta
Zod enum + lint editorial
Cobertura
6 valores válidos

Variants permitidas: neutral, info, success, warning, danger, brand. Cualquier otra es rechazada por OPA. La regla evita la inflación de variants accent que ha plagado design systems durante años.

Texto + color, nunca solo color

Herramienta
Contract test
Cobertura
WCAG SC 1.4.1 Use of Color

Un Badge nunca comunica estado solo con color (rojo = error). Siempre incluye texto descriptivo. La policy rechaza Badges con prop label vacío o solo emoji.

Estado físico

Agentic-consumable desde noviembre de 2025. El enum cerrado de variants impide que el agente proponga “warning-soft” o “success-light” inventadas.

Estados soportados

default, with-icon (icono semántico al lado del texto), with-count (numérico, sin texto). Sin estados interactivos: el Badge no se hover, no se focuse, no se pulsa.

Composiciones prohibidas

Reglas activas

Variant fuera del enum

Herramienta
OPA · block level
Cobertura
Seis valores válidos

neutral, info, success, warning, danger, brand. Cualquier otro (warning-soft, pro, trial) se rechaza. El agente aprende a reutilizar.

Badge sin label textual

Herramienta
OPA · block level
Cobertura
SC 1.4.1 Use of Color

Emoji o icono solo no cuentan como label. Un Badge sin texto descriptivo accesible se rechaza.

Badge con click handler

Herramienta
OPA · block level
Cobertura
Separación Badge vs Tag

Si necesita ser clickable, promoverlo a Tag. El Badge es indicador pasivo.

Interoperabilidad

  • Consumido por: Card, TableRow, NavItem (indicador de nuevo/actualizado), UserMenu.
  • Consume: Icon (opcional, 12×12).
  • Con qué compone mal: como hijo directo de Button (confunde el hit-target), dentro de Modal title (se lee como ruido).
  • Sustituibles por: Tag si es dismissible; Pill es sinónimo no canónico y se rechaza.

Medición propuesta

Eventos planificados

badge.render_by_variant

Herramienta
OTLP · Metrics
Cobertura
Distribución del uso

Ratio de cada variant. Si brand o neutral concentran >70% del uso, el enum podría revisarse.

Mutación plástica (Estado 3)

Qué muta y qué permanece

Tamaño size = derive(contexto-padre)

Dentro de TableRow se compacta; dentro de Card se mantiene default; dentro de NavItem se reduce a mini.

Contraste opacity = derive(prefers-contrast)

Con high-contrast los fondos suaves de success/warning suben saturación para mantener AA.

Fijo por contract enum de seis variants · label obligatorio · no interactive

Contract duro.

Rollback si la mutación sugiere una séptima variant o si el label se propone omitir por compacidad.

Genealogía

Árbol de evolución

Badge inicial con 12 variants

Cada equipo de producto añadía su variant favorita. Inflación incontrolada.

Consumidor Producto · 8 productos

Poda a 6 variants canónicas

Auditoría editorial reduce variants. Migración costosa.

Consumidor Producto · 22 productos

Badge governable

Enum cerrado en código. Lint que rechaza variants nuevas.

Consumidor Producto · 28 productos

Badge.AI · expuesto vía MCP

Schema con enum cerrado. Auto-completion correcta para agentes.

Consumidor Humano + agente

Notas del editor

Descartes catalogados

Variants rechazadas

variant='dismissible'

Badge con botón X para cerrarlo. Si es interactivo, debería ser un Tag (Chip). Movido a componente <Tag /> separado.

variant='gradient'

Fondo con gradiente para destacar estados premium. Rompía la disciplina cromática del sistema. Sustituido por una sola variant brand sólida.

Referencias cruzadas