import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs'; import image1 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/01_Etiqueta_Variaciones_EtiquetaNormal.png'; import image2 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/02_Etiqueta_Variaciones_EtiquetaFiltro.png'; import image3 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/03_Eriqueta_Contenido_Colores.png'; import image4 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/04_Etiqueta_Anatomia.png'; import image5 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/05_Etiqueta_Anatomia_Combinadas.png'; import image6 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/06_Etiqueta_Anatomia_Estados.png'; import image7 from '../../stories/assets/Docum_SDSS_Componentes/08_Etiqueta/tag.png'; # Etiqueta / Tag Las etiquetas se usan para **etiquetar**, **categorizar** u **organizar** elementos mediante **palabras clave** (keywords) que los describen. Se puede usar una única etiqueta o varias con un mismo elemento. Se usan las etiquetas cuando los contenidos pertenecen a múltiples categorías y cuando el usuario necesita una forma sencilla de diferenciarlas. También se pueden usar como un método de filtrar datos y mostrar solo los elementos de una categoría en concreto. ### Variaciones Las etiquetas pueden ser **etiquetas normales** para clasificar o **etiquetas de filtro**. | **Etiqueta normal **

| **Etiqueta de filtro **

| | ------------------------------------- | ---------------------------------------- | |

| ### Contenido Las etiquetas deben ser lo más cortas posibles para una más sencilla asimilación. Se recomienda utilizar etiquetas de una única palabra. En el caso de que haya que diferenciar entre dos etiquetas con conceptos comunes se puede usar una segunda palabra, pero no se recomienda superar este número. El color de la etiqueta forma parte del contenido, aunque en principio solo se emplea en las etiquetas normales, no en las de filtro. Se usarán los colores definidos en cada tema para las etiquetas. Es importante que entre el color del fondo de la etiqueta y el texto haya suficiente nivel de contraste para permitir su legibilidad y las haga accesibles. Los colores aplicados a las etiquetas vendrán definidos por los colores de cada tema, aunque es recomendable tener en cuenta siempre una separación de por lo menos cinco grados entre ambos colores según las paletas de color estándar.

### Anatomía Las etiquetas consisten en un elemento envolvente de pequeño tamaño, de 24px de altura, y bordes redondeados, con un radio de 12px. El texto de las palabras claves es más pequeño de lo normal, siendo este tipo Lato de 12px. El padding del texto y del icono en el caso del filtro es de 8px.

La combinación de etiquetas, cuando hay varias asociadas al mismo elemento, se realiza situándolas una detrás de otra con un espaciado de 8px entre ellas, la unidad de referencia de espaciado. Si hay más etiquetas que el espacio disponible, las sobrantes pasaran a una nueva línea con un espaciado igual de 8px, manteniendo la misma alineación del texto.

### Comportamiento Mientras las etiquetas de clasificación no presentan ninguna interacción con el usuario, las etiquetas de filtro sí presentan una cierta interacción, dado que clicando en el icono se pueden cerrar y eliminarlas del filtro. Es por ello que las etiquetas , solo las de filtro, tienen una serie de estados, enabled, hover, focus, disabled y skeleton.