Badge

Lexy usa badges compactos con borde, radio completo y peso tipográfico fuerte. Cada tono toma una escala del sistema: Indigo para marca, Salud y Deudor para verticales, y Red, Amber o Green para estados.

Usa small en filas densas, medium como default y large solo cuando el badge acompaña títulos o superficies de baja densidad. Evita mezclar tamaños en el mismo contexto.

El icono refuerza la lectura cuando el estado necesita escaneo rápido. No pongas dos iconos ni anides un badge dentro de otro badge.

• Usa badges para metadata corta y escaneable: estado, etapa, rol, plan, ambiente o prioridad.
• Un badge debe tener una o dos palabras. Si necesitas una frase, el contenido pertenece al texto de la fila.
• El badge se ubica sobre o cerca del componente que describe, con proximidad suficiente para entender la relación.
• La variante sutil es el default para documentos, tablas y listados densos. La sólida queda para foco o alerta real.

• Usa sentence case en producto Lexy, salvo que el valor venga de una API o término canónico.
• El color debe usarse intencionalmente para dirigir la atención; warning y danger deben venir con una forma de resolver el problema.
• Los badges no tienen ancho máximo por defecto: si el texto viene de datos externos, agrega truncamiento.
• Por defecto no reciben foco. Si el badge abre más contexto, debe tener foco, etiqueta accesible y teclado.

El badge debe quedar integrado al objeto que describe. No lo uses como adorno flotante ni como resumen duplicado.

Cuando el texto del entorno ya da contexto, un punto de estado puede ser suficiente. No dependas solo del color: acompáñalo con una etiqueta visible o accesible.

Los badges crecen con el contenido. En filas alimentadas por datos externos, define un ancho máximo y corta con elipsis para proteger la grilla.

Un badge es una etiqueta estática. Si el valor puede activar una acción o filtro, usa un botón, un link o una variante de chip interactivo con foco y estados visibles.

Si el badge solo muestra un icono o un punto, comunica el significado con aria-label o en el label del elemento asociado.

El texto, el icono o la etiqueta accesible deben sostener el significado incluso si el color no se percibe.