Uso
Cuándo usar
- Cuando el contenido pertenezca a múltiples categorías o necesite diferenciarse. Sirven para clasificar información o destacarla en modo solo lectura.
- Para filtrar información y mostrar varias etiquetas.
- Cuando la etiqueta es interactiva y se utiliza para agrupar contenido relacionado, como categorías o filtros.
Cuándo no usar
- Como llamada a la acción para redirigir a la persona usuaria a una nueva página, en ese caso utiliza el componente Botón
- Evitá usar las etiquetas estáticas e interactivas en una misma página ya que puede generar errores no forzados.
Tipos de etiquetas
Estática
Se utilizan para proporcionar información o identificación de un elemento a través de una palabra clave estática.
Clickeable
Se utiliza para redirigir a la persona usuaria a otra página con contenido relacionado a la etiqueta.
Seleccionable
Se utiliza para filtrar información relacionada en una misma página.
Eliminable
Se utiliza en campos de búsqueda para filtrar y borrar la opción seleccionada.
Tamaños
Existen 3 tamaños de etiquetas: pequeñas (small), medianas (medium) y grandes (large). Según el contexto de uso en la interfaz corresponde el tamaño de la etiqueta.
Ancho máximo
Todos los tipos de etiquetas tienen configurado un ancho máximo para asegurar el correcto comportamiento con textos que ocupan más de 3 palabras. Los textos que excedan los 240px de ancho pasan a formar una segunda línea de texto.
Apariencia
Las etiquetas adoptan estilos predefinidos según su función. Cada tipo aplica un set de variables de color específicas que garantizan consistencia visual y una comunicación clara del contenido.
| Valor | Propósito | Color asociado |
|---|---|---|
| Primario | Información sin énfasis. | Gris claro |
| Información | Datos informativos o aclaratorios. | Azul |
| Éxito | Para casos aprobados, completos, exitosos, finalizados. | Verde |
| Advertencia | Para casos que requieren atención, también para casos en pausa o rechazados. | Amarillo |
| Peligro | Para casos de error, no completados, eliminados. | Rojo |
| Destacado | Promoción, novedad, énfasis visual. | Violeta / color destacado |
Jerarquías
Las etiquetas estáticas y clickeables tienen dos niveles de jerarquía según el énfasis necesario para resaltar el elemento.
Primaria
La jerarquía primaria se utiliza para destacar un elemento, propiedad o concepto del conjunto total de etiquetas.
Secundaria
La jerarquía secundaria se usa con mayor frecuencia cuando hay tres o más etiquetas en línea para categorizar la información de un elemento.
Unica
Tanto las etiquetas seleccionables como eliminables tienen una jerarquía visual única para no entorpecer la decisión del usuario por el color.
Ejemplos de uso
Utilizá etiquetas primarias para resaltar la categoría principal del evento, y las etiquetas secundarias información complementaria.
No recomendamos saturar la página con etiquetas primarias, ya que pueden competir entre sí. Si todo está resaltado, nada lo está.
Uso de íconos
Los íconos son opcionales y pueden utilizarse para reforzar el significado o mejorar la identificación visual de la información. Se recomienda usarlos únicamente cuando aporten valor semántico o mejoren la comprensión, evitando sobrecargar el componente.
Disposición
Se alinean siempre a la izquierda para mantener un orden de lectura natural. Suelen usarse al comienzo de un artículo para mostrar una categoría principal, o al final como "Etiquetas relacionadas", ayudando a clasificar y contextualizar el contenido.
Las etiquetas se alinean a la izquierda para facilitar la lectura y la accesibilidad.
Alinearlas a la derecha interrumpe la lectura y dificulta su identificación.
Contexto de uso
Para resaltar un estado, tipo o modalidad de contenido que no requiere acción del usuario.
Se pueden utilizar para mostrar información complementaria o clasificar contenido de manera visual, sin interacción. Por ejemplo, en una ficha de trámite puede indicar si es Presencial o En línea.
Para agrupar o categorizar contenido
Se pueden utilizar en listados, tarjetas o secciones donde el contenido puede organizarse por temas o categorías, permitiéndole al usuario filtrar, navegar o descubrir información relacionada de forma rápida. Suelen resumir el contenido de la página.
Para búsquedas filtradas por temas específicos
Para filtrar información sobre temas relacionados a través de un campo de búsqueda. Permite eliminar las etiquetas seleccionadas para volver atrás con la filtración por esa categoría.
Para filtrar contenido en una misma página
Las etiquetas de filtro activas se utilizan para indicar que un criterio de filtrado está aplicado. Al interactuar con la etiqueta, el filtro se activa o desactiva produciendo que la interfaz actualice de manera inmediata.
Contenido
Texto en las etiquetas
Las etiquetas deben ser breves, claras y estar redactadas siguiendo pautas de escritura. Evitá que el texto se corte en varias líneas: lo ideal es que no superen los 20 caracteres.
