# Badge
Un badge enfatiza un elemento que requiere atención o ayuda a categorizarlo junto a elementos similares.
```tsx
En curso
}>
Revisión
```
## Variantes
### Color y énfasis
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.
```tsx
Neutral
Neutral subtle
Indigo
Indigo subtle
Deudor
Deudor subtle
Advertencia
Advertencia subtle
Error
Error subtle
Editorial
Editorial subtle
Correcto
Correcto subtle
Salud
Salud subtle
Inverted
```
### Tamaños
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.
```tsx
Small
Medium
Large
```
### Con iconos
El icono refuerza la lectura cuando el estado necesita escaneo rápido. No pongas dos iconos ni anides un badge dentro de otro badge.
```tsx
import { CheckmarkCircle16Regular, Info16Regular, Clock16Regular, ErrorCircle16Regular } from "@fluentui/react-icons";
}>
Resuelto
}>
Resuelto
}>
Informativo
}>
Informativo
}>
Por vencer
}>
Bloqueado
```
## Uso
### Cuándo usar
- 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.
### Buenas prácticas
- 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.
## Layout
### Junto al elemento descrito
El badge debe quedar integrado al objeto que describe. No lo uses como adorno flotante ni como resumen duplicado.
```tsx
Causa RIT C-1243-2026
Juzgado de Familia de Santiago
En curso
Notificaciones
```
### Puntos de estado
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.
```tsx
function StatusDot({ tone, label }) {
return (
{label}
);
}
```
## Comportamiento
### Ancho y truncamiento
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.
```tsx
Asignado
Pendiente de revisión documental
```
### No interactivo por defecto
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.
## Accesibilidad
### Icono solo
Si el badge solo muestra un icono o un punto, comunica el significado con aria-label o en el label del elemento asociado.
```tsx
import { Warning16Regular } from "@fluentui/react-icons";
}
/>
}>
Vence hoy
```
### Color no es suficiente
El texto, el icono o la etiqueta accesible deben sostener el significado incluso si el color no se percibe.