Tag

El objetivo de un Tag es aportar claridad: identificar estados (“Activo”, “Nuevo”), clasificar contenido (“Energía”, “Movilidad”), o señalar atributos relevantes dentro de listas, tarjetas o detalles de producto.

Diseñado para ser ligero y fácilmente escaneable, el Tag mantiene la coherencia visual del sistema mediante tipografía, espaciados y esquemas de color alineados con nuestra identidad. Los equipos pueden usarlo para:

• Categorizar contenidos en listados densos.
• Etiquetar estados en paneles de información o fichas.
• Destacar metadatos en componentes más complejos como cards o tablas.

El Tag en Energy puede adoptar distintos estados semánticos pensados para ayudarte a comunicar de forma clara el significado o la naturaleza del contenido que acompañan. Estos estados están disponibles tanto sobre fondo blanco como sobre fondo navy, garantizando siempre legibilidad y un contraste adecuado en cualquier contexto.

El componente Tag puede adaptarse a diferentes necesidades para encajar mejor en cada contexto de uso.

Icono

Puedes añadir un icono cuando necesites reforzar visualmente el significado. Esta opción es combinable con las otras disponibles.

Arrow

Puedes activar su navegabilidad para convertirlo en un elemento interactivo que lleve al usuario a una vista concreta. Esta opción es combinable con la posibilidad de tener o no icono.

Tamaño

Incluso puedes ajustar su tamaño según la densidad o jerarquía de la interfaz. Esta opción solo puede combinarse con el icono, es demasiado pequeña para ser interactiva.

Los tags están pensados para transmitir información breve y específica, por lo que sus posibilidades de crecimiento y combinación son limitadas. A continuación se describen sus principales restricciones de uso.

Contenidos

El contenido del tag debe ser siempre breve y conciso. No existe un límite máximo de caracteres, pero se recomienda mantener textos cortos para asegurar buena lectura y evitar desbordamientos innecesarios.

Width

El tag solo ocupará el espacio mínimo necesario para mostrar su contenido. No se expandirá para rellenar un contenedor ni tiene un ancho máximo definido: crecerá únicamente según lo que necesite para mostrar su texto.

Overflow

El ancho del tag aumentará hasta ocupar todo el espacio disponible del contenedor. Cuando alcance el máximo permitido, el contenido hará wrap (saltará de línea) y el tag se centrará automáticamente dentro del espacio.

Grouping

Cuando varios tags se agrupan, mantienen un espaciado fijo de 16px. Si la agrupación no cabe en una sola línea, se aplicará wrap y se mantendrá este mismo espaciado vertical para asegurar una composición equilibrada.

Grouping overflow

Si uno de los tag es especialmente largo y ocupa todo el ancho disponible, el componente activa su comportamiento de overflow, evitando que el diseño se rompa y manteniendo la legibilidad. De esta forma, aseguramos una experiencia consistente

Interaction

Por defecto, los tags pueden mostrarse en estado activo o deshabilitado, y en determinados contextos pueden funcionar como enlace a otra página. Cuando un tag es accionable, debe indicarlo siempre de forma explícita mediante el icono de flecha (arrow), reforzando visualmente que existe una navegación asociada. No se define interacción en hover, ya que el tag no debe comportarse como un botón ni generar expectativas de acción compleja.

Por motivos de accesibilidad, el tag en tamaño small nunca debe ser accionable. En estos casos, si es necesario ofrecer una acción o navegación, se recomienda que sea el contenedor completo (por ejemplo, una tarjeta o fila) el que actúe como elemento clicable, manteniendo el tag como apoyo informativo.

Cuando un tag se muestra en estado disabled, se aplica una opacidad del 30 % sobre el componente para comunicar claramente su indisponibilidad. En este estado, cualquier tipo de acción o navegación queda deshabilitada, incluso aunque el tag sea normalmente accionable.

Only icon

El estado colapsado (Donde solo se ve el icono) del tag es un comportamiento de usabilidad, no una variante del componente.

El tag está diseñado para comunicar siempre mediante icono + label, siendo el texto obligatorio como parte de su significado y accesibilidad. Sin embargo, existen escenarios muy concretos en los que el espacio disponible no permite mostrar el contenido completo sin provocar overflow o romper el layout. Solo en estos casos se habilita el comportamiento colapsado, en el que el tag reduce su contenido y muestra únicamente el icono.

Es importante entender que este estado:

• No define un nuevo tipo de tag, sino una adaptación puntual al contexto.
• Debe ser siempre temporal: cuando el contenedor recupera espacio, el tag debe volver automáticamente a mostrar su label.