Badge

los badges son elementos visuales clave para captar la atención del usuario de forma rápida y no intrusiva. Se utilizan habitualmente para indicar notificaciones, actualizaciones pendientes, nuevos mensajes o estados relevantes que requieren atención.

El componente cuenta con dos variantes principales:

• Dot: se emplea como indicador visual sin información textual, útil para señalar actividad o cambios de estado.
• Numeric: muestra un valor numérico, normalmente asociado a notificaciones, mensajes o elementos pendientes de atención.

Por defecto, el badge se muestra sin borde. Sin embargo, si se coloca sobre un fondo con poco contraste, se puede activar un borde de 2px en color blanco para mejorar la legibilidad.

El comportamiento de los badges en productos digitales está orientado a ofrecer información rápida y contextual sin interferir en la interacción del usuario. Su aparición suele estar ligada a eventos dinámicos del sistema, como:

• Actualización en tiempo real: Los badges pueden aparecer o actualizarse automáticamente cuando hay cambios en el estado del contenido (por ejemplo, un nuevo mensaje, una alerta o una acción pendiente).
• Visibilidad contextual: El badge solo se muestra cuando hay información relevante que comunicar. Si no hay nada que destacar, el componente desaparece para evitar ruido visual.
• Interacción indirecta: Los badges no son interactivos en sí mismos, pero suelen estar asociados a elementos que sí lo son (como iconos de notificaciones, menús o pestañas), guiando al usuario hacia la acción o el contenido correspondiente.
• Prioridad visual controlada: Aunque destacan visualmente, los badges están diseñados para no interrumpir la navegación ni competir con otros elementos importantes de la interfaz.

Min/Max en Number

Rango numérico: la variante numérica del badge puede mostrar un mínimo de 1 y un máximo de 99+. Si el número excede 99, se mostrará como "99+" para mantener la legibilidad y consistencia visual.