Recomendado: Ancla el Badge al control al que pertenece
Colócalo sobre el ícono o acción que abre esa información, para que la persona sepa qué hay pendiente y dónde mirar.
Badge
El Badge es un indicador compacto de notificaciones, cuentas o estados pendientes. Puede mostrarse como punto, como conteo o como conteo alto, suelto o anclado a un ícono.
Anatomía del componente
Cargando anatomía…
- Ancla
- Control asociado
- Conteo
Propiedades y configuraciones
Variante
Forma y tipo de indicador. Usa el punto cuando solo importa avisar que hay novedades y el conteo cuando el número aporta.
Avisa que hay novedades sin indicar cuántas.
1
999+
Contenido
Un número de un dígito o un tope con “+” cuando el conteo crece. Los topes usan --count-max. En la variante punto el contenido se ignora.
Un dígito, del 1 al 9.
3
9+
99+
999+
Colocación
Suelto junto a un texto, o anclado con .cl-badge-anchor a la esquina superior del control al que pertenece. Anclado, el nombre accesible va en el control y el Badge se oculta.
Sobre el control que abre las novedades, como la campana del header.
Mis trámites
2
Tamaño del ancla
Ajusta la posición vertical del Badge al tamaño del ícono anclado. Sin modificador se usa una posición genérica.
Para íconos de 32 px, como en el header móvil.
3
3
3
Cuando usarlo
Úsalo para señalar que hay algo nuevo o pendiente de atención: notificaciones sin leer, mensajes, solicitudes por revisar o un conteo breve asociado a un ícono o acción del header.
Si necesitas etiquetar un estado semántico (éxito, advertencia, información) o un filtro seleccionable, usa Chip, Alert u otro componente pensado para ese significado — no el Badge.
Buenas prácticas
Recomendado: Usa el punto cuando el número exacto no aporta
Si solo importa avisar que hay novedades, usa la variante punto en vez de inventar un conteo.
Recomendado: Limita los conteos altos con “+”
Cuando el número crece, usa un tope (9+, 99+, 999+) para que el header se mantenga estable.
Malas prácticas
No recomendado: No lo uses como etiqueta de estado o categoría
El Badge no reemplaza a un Chip de estado (“Aprobado”, “En revisión”). Su rol es contar o avisar novedades, no clasificar.
No recomendado: No pongas palabras dentro del Badge
El contenido es un número o un tope corto. Palabras como “Nuevo”, “Urgente” o “Pendiente” van en un Chip o en el texto de la interfaz.
No recomendado: No satures la interfaz con varios Badges
Muchos indicadores a la vez generan ruido y no ayudan a priorizar qué debe atender la persona primero.
No recomendado: No lo dejes suelto sin contexto visual
Un Badge flotando en el margen no comunica a qué pertenece. Debe ir anclado al control o junto a la etiqueta que cuantifica.
Recomendaciones de accesibilidad
Anuncia el significado, no solo el número
Usa un nombre accesible que explique el contexto (p. ej. “3 notificaciones sin leer”, “Notificaciones sin leer” en el punto). Un “3” solo no basta para tecnologías de asistencia.
Usa un rol de estado, no de decoración
El Badge comunica información dinámica; en los ejemplos del kit se usa role="status" para anunciarlo sin interrumpir de forma agresiva el flujo.
Oculta el ícono decorativo cuando el Badge ya nombra la novedad
Si el Badge (o su aria-label) ya describe las notificaciones, el ícono de campana puede ir con aria-hidden="true" para no duplicar el anuncio.
No dependas solo del color
El rojo indica atención, pero el significado debe estar en el texto accesible (y, cuando hay conteo, en el número visible). No asumas que “punto rojo” se entiende por sí solo.
Actualiza el anuncio cuando cambie el conteo
Si el número baja a cero, retira el Badge o actualiza el nombre accesible (“Sin notificaciones nuevas”) para no dejar un indicador obsoleto.
No conviertas el Badge en el único control
El clic o la activación deben estar en el botón/enlace que lo contiene (campana, ítem de menú). El Badge informa; el control padre ejecuta la acción y debe tener foco y nombre propios.
Última actualización: Octubre de 2026