Tag

Es un elemento visual utilizado para representar y etiquetar de manera visual información relevante o categorías específicas dentro de una interfaz de usuario.

Figma

Storybook

AEM

‍

Overview

Los tags son pequeñas unidades visuales que se pueden aplicar a diferentes elementos, como artículos, mensajes, usuarios, productos, entre otros, con el fin de proporcionar una clasificación o contextualización adicional.

Utiliza los colores semánticos de las foundations para diferenciar entre distintos tipos de tags o para indicar diversos estados (por ejemplo, activo, inactivo, importante, etc.).

Nombre

Descripción / Uso

Ejemplo

No items found.

Variantes

‍

En Oxygen, las tags están disponibles en dos tamaños: Medium y Small. Estas variantes están diseñadas para adaptarse a elementos de diversas dimensiones dentro de la interfaz de usuario.

Nombre

Descripción / Uso

Ejemplo

No items found.

Nombre

Descripción / Uso

Ejemplo

No items found.

Opciones

Las opciones de las tags van ligadas al uso semántico del color. De esta forma podemos aportar más información al usuario, no solo a través del texto del label, sino también mediante los colores semánticos de foundations.

‍

Actionable

Las tags pueden tener un icono que enfatice que se ha convertido en un elemento accionable. Cualquiera de las opciones puede llegar a comportarse de esta forma. Esta opción está oculta por defecto.