Etiqueta

Las tags son elementos que usamos para listar atributos o para mostrar filtros activos.

Vista Previa

Figma

Usos

Cuándo usar

Utilizar etiquetas cuando el contenido está asignado a varias categorías y el usuario necesite una forma de diferenciarlas.

Cuándo no usar

No usar varios tipos de énfasis dentro de una interfaz de usuario. Se utiliza un énfasis más fuerte para denotar estados seleccionados en muchos escenarios y puede confundir al usuario.

No usar demasiados colores para las etiquetas dentro de una interfaz de usuario. Por lo general, solo se debe usar un color para las etiquetas. Los colores múltiples solo deben usarse cuando sean significativos para el usuario.

Comportamiento

Acción

Text

Icon

Tag Filter

Tag Button

Tipo

Default

Success

Warning

Error

Info

Icon Right

Tamaño

Small

Medium

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Si la etiqueta no tiene asociada acción es un elemento span normal con texto en su interior que no tiene ninguna funcionalidad añadida para las tecnologías de asistencia.

Si la etiqueta tiene un papel de filtro y lleva el aspa de cierre, es un elemento span con el icono de cerrar con role="button"

Si la etiqueta tiene un papel de botón, lleva la propiedad role="button"