Filter Tag
Las filter tag proporcionan información contextualizada, concretamente criterios de filtrado. Por lo que contienen una mínima interacción y es que el usuario puede eliminar las etiquetas o tag por las que ha buscado.
Recomendaciones de uso
¿Qué hacer?
- Usar para mostrar información que ayude y de información al usuario como parámetros de filtro o búsqueda.
- Utilizar palabras concretas y concisas.
- Utilizar una descripción breve en la etiqueta.
¿Qué no hacer?
- Usar las filter tag para desencadenar una acción. En ese caso se debe usar un botón.
- Ofrecer descripciones largas. No se recomienda usar más de cuatro palabras.
Estados
Las filter tag al ser un elemento interactivo disponen de cinco estados:
- Stanby: una vez el usuario ha realizado la acción de filtrado aparecerá la filter tag en estado natural.
- Hover: es la interacción al pasar por encima del componente.
- Focus: te enfoca que filter tag tienes seleccionada. Este tipo de estado es muy útil para las personas que trabajan con teclado.
- Active: indican con qué elemento de un conjunto estas interactuando. Se inicia por elección del usuario, cuando hace clic sobre él por ejemplo. Se ve en un pequeño periodo de tiempo.
- Disabled: es el estado desactivado.
Estilos
Color
| Nombre | Propiedad | Color Token |
|---|---|---|
| filter-tag:label | text color | $text-01 |
| filter-tag:icon | color | $interactive-01 |
Interactivos
| Nombre | Propiedad | Color Token |
|---|---|---|
| filter-tag:hover | text color | $hover-01 |
| filter-tag:active | color | $active-01 |
| filter-tag:focus | stroke | $focus-01 |
| filter-tag:disabled | color | $disabled-01 |
Tipografía
| Nombre | Tamaño de fuente (px/rem) | Font weight | Estilo |
|---|---|---|---|
| filter-tag:label L | 11 / 0.688 | Extrabold / 800 | $Button-S |
| filter-tag:label M | 11 / 0.688 | Extrabold / 800 | $Button-S |
| filter-tag:label S | 11 / 0.688 | Extrabold / 800 | $Button-S |
Estructura
