Etiquetas
Las etiquetas (también conocidas como “chips”) son elementos compactos que permiten a los usuarios ingresar información, hacer selecciones, filtrar contenido o activar acciones. Son similares a las badges, pero se usan más comúnmente en entradas para permitir que los usuarios seleccionen varios elementos a la vez.
Comportamiento
Utilice etiquetas para etiquetar objetos de la interfaz de usuario para un reconocimiento y navegación rápidos. Se pueden utilizar para distintos tipos de objetos, incluidos: texto de formato libre, texto predefinido, reglas o contactos. Las etiquetas están diseñadas para mostrarse dentro de un grupo de etiquetas . Pueden mostrarse de forma plana, como enlaces o con un botón de cierre.
- Como las etiquetas son interactivas, se oscurecen al pasar el cursor sobre ellas o al enfocarlas. Esto muestra a los usuarios que pueden hacer algo al interactuar con la etiqueta.
- Las etiquetas tienen dos estados: predeterminado y seleccionado. Cuando se selecciona una etiqueta (por ejemplo, cuando se aplica un filtro), se vuelve más oscura para atraer más la atención.
- Las etiquetas que se pueden quitar son PrincipalLight:active predeterminado. Esto ayuda a distinguirlos como más interactivos. También ayuda a los usuarios a ver la posibilidad de eliminar la etiqueta haciendo clic en el botón de cerrar.
Cuándo utilizar Etiquetas
- Para mostrar las opciones seleccionadas que se pueden agregar y eliminar.
- Para agregar etiquetas interactivas.
Cuándo no utilizar Etiquetas
- Para acciones que afecten a cualquier otra cosa, utilice un
Tamaño
- Puede reducir las Etiquetas a un tamaño pequeño de 32 de alto la tipografía tambien se reduce a 12px pero el tamaño del icono se mantiene