Badges de estado
El SGD reutiliza src/components/ui/badge.tsx (CVA y Tailwind) y StatusBadge (src/components/ui/status-badge.tsx). Badge es una etiqueta informativa sin rol de botón ni cursor de acción. Los chips de filtro y las etiquetas removibles mantienen su acción en Button o en su control correspondiente.
Anatomía y uso
softes la variante predeterminada para tablas y listados.soliddestaca un estado puntual; evita varias etiquetas intensas en la misma fila.outlineusa fondo transparente y borde de 1 px; comprobar contraste sobre la superficie real, en especial en oscuro.sm,mdylgtienen alturas mínimas de 20, 24 y 28 px. Radio, separación, tipografía y color se definen ensrc/app/globals.cssmediante--sgd-badge-*. Línea única y elipsis: las etiquetas nunca envuelven en varias líneas (white-space: nowrap !important); si el espacio es reducido o la columna es estrecha, truncan con puntos suspensivos (text-overflow: ellipsis !important; overflow: hidden !important) y los iconos permanecen íntegros (shrink-0). Solo se expone tooltiptitlecuando se pasa explícitamente, evitando tooltips repetitivos en etiquetas cuyo texto ya es legible a simple vista. Al redimensionar la columna de la tabla se visualiza el texto completo de forma natural.- Texto breve en estilo oración. Un icono de Material Symbols es opcional y decorativo; el texto siempre identifica el estado.
StatusBadgeaceptastatuscomo valor de datos ylabelpara presentar el valor sin cambiar la lógica. - No usar sombras, degradados, bordes gruesos ni apariencia de control interactivo.
Colores semánticos
| Tono | Significado | Ejemplos |
|---|---|---|
Verde (success) | Resultado correcto o completado | Completado, aprobado, entregado |
Rojo (error) | Fallo o rechazo | Fallido, rechazado, vencido |
Naranja (warning) | Atención necesaria o vencimiento próximo | Observado, urgente, vence hoy |
Azul (info) | Información o proceso en curso | En proceso, emitido, enviado |
Gris (neutral) | Sin valoración de éxito o fallo | Borrador, pendiente, sin iniciar, inactivo, prioridad normal/baja |
El mapa general src/lib/chip-tone.ts elige el tono por defecto. Si una pantalla sabe que un Pendiente concreto requiere acción, pasa tone="warning" explícitamente. No inferir error de prioridad alta ni éxito de prioridad baja. primary se conserva para compatibilidad con etiquetas de identidad; no sustituye la semántica de estados.
Theme LATAM, Theme Adobe Spectrum y Theme Institucional comparten anatomía y significado. src/app/globals.css define tintas semánticas, superficies suaves, fondos sólidos y contornos para claro y oscuro. Las claves internas de tema no cambian.
La sección Badges de estado aparece al inicio de /design-system/componentes, con un enlace directo desde la cabecera (#badge-heading). Muestra Soft/Solid/Outline, cinco tonos, tamaños, iconos opcionales, texto largo y una tabla. La muestra de filtro es un botón para dejar clara la diferencia de comportamiento.