Componente de insignia para Figma: 340 variantes

Visión General de Badges y Tags

Los componentes Badge y Tag en Emvi UI permiten etiquetar, clasificar y resaltar elementos de forma visual, compacta y accesible. Aunque ambos cumplen funciones similares, se diferencian por su contexto de uso:

Badge: Indica conteo, estado o notificación. Generalmente acompaña a otro componente (botón, ícono, avatar).

Tag: Representa una categoría, etiqueta o filtro. Puede ser interactiva (editable, eliminable) o estática.

Ambos componentes están diseñados para integrarse de forma nativa en interfaces responsivas, con soporte para variantes de color, ícono, tamaños y comportamiento.

Indicando estado

Reserva las insignias para estados, cantidades o categorías breves y acompaña el color con una etiqueta legible. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.

Resaltando notificaciones

En Figma, compara las variantes del componente dentro de una pantalla real del producto. Revisa el espaciado, el contraste y las etiquetas en los estados relevantes y adapta el patrón al sistema de diseño del equipo. Documenta la variante y los estados elegidos para mantener la coherencia entre pantallas.

Marcando eventos

Las insignias también son excelentes para marcar eventos o condiciones especiales. Pueden denotar nuevas funciones, ofertas por tiempo limitado o cualquier evento que requiera atención. Colocar una insignia junto a un elemento puede atraer el foco de los usuarios hacia él, asegurando que noten y participen con contenido importante. Nuestro UI KIT incluye componentes de insignias versátiles que pueden personalizarse para adaptarse a diversas necesidades, mejorando tanto la funcionalidad como la estética de su diseño.

Variantes y Tipología

Emvi UI proporciona múltiples variantes para los componentes Badge y Tag, pensadas para cubrir distintos casos de uso y adaptarse a diversas jerarquías visuales:

Badge:
Contador Numérico: Muestra cantidad o notificación (ej. 3, +99), común en botones e íconos.
Estado Visual: Representa status como "Activo", "Nuevo", "Pendiente" con color semántico.
Punto de Estado: Indica presencia o conexión mediante punto de color pequeño.

Tag:
Etiqueta Estática: Muestra texto categórico (ej. Marketing, Beta).
Etiqueta Interactiva: Incluye botón de cierre o permite selección múltiple.
Tag con Ícono: Añade contexto visual con íconos representativos a la izquierda o derecha.

Cada variante está disponible en tamaños XS, SM y MD, con soporte para personalización vía tokens (tipografía, padding, colores, border-radius).

Comportamiento Interactivo y Estados

Los componentes Badge y Tag en Emvi UI pueden ser estáticos o interactivos, según el contexto. Las versiones interactivas responden a eventos como hover, focus, click o cierre, y están diseñadas para mejorar la experiencia del usuario sin comprometer la accesibilidad.

Estados Soportados:
Hover / Focus: Cambio de fondo o contorno para indicar interactividad.
Active / Pressed: Feedback visual al presionar o seleccionar.
Disabled: Estilo atenuado y sin interactividad.
Dismissible: Opción de eliminar una Tag mediante ícono de cierre.

El comportamiento se alinea con los estándares WCAG y los atributos aria-* pueden aplicarse para mejorar la compatibilidad con lectores de pantalla.

Integración en Diseño y Desarrollo

Los componentes Badge y Tag están disponibles como variantes reutilizables dentro de Figma, organizados por tipo, tamaño, color y estado. Cada uno está conectado a estilos globales de tipografía, color y espaciado, permitiendo personalización controlada sin perder consistencia visual.

En entornos de desarrollo, se implementan fácilmente con clases de Tailwind como:
inline-flex, items-center, px-2, rounded-full
bg-primary-100 text-primary-700
hover:bg-primary-200 (para versiones interactivas)

El sistema también incluye soporte para slot de íconos y atributos data-* o aria-* para ampliar funcionalidad y accesibilidad.

Buenas Prácticas

Para maximizar la eficacia visual y funcional de los componentes Badge y Tag en Emvi UI, se recomienda seguir estas pautas:

- Usar badges únicamente cuando sea necesario resaltar estado, conteo o alerta.
- Evitar tags demasiado largos o que rompan el diseño responsivo.
- No utilizar tags para información crítica que no esté reflejada en otro lugar.
- Mantener consistencia en los colores semánticos según su función (status, categoría, notificación).
- Incluir etiquetas accesibles (aria-label) en tags con íconos o funciones interactivas.

Estas prácticas aseguran una experiencia de usuario clara, accesible y coherente con el resto del sistema.