Etiqueta

Una etiqueta es una descripción textual de los atributos de un objeto, como su estado o tipo. Las etiquetas se utilizan para categorizar, etiquetar o clasificar entidades, así como para marcarlas en un formato Clave:Valor.

§Cuándo usar

Las etiquetas se utilizan en todas partes (por ejemplo, en tarjetas, en tablas, en páginas de entidades) para indicar atributos de objetos y ayudar a los usuarios a identificar y categorizar rápidamente el contenido. Las etiquetas generalmente se muestran junto a los objetos relacionados.

Otra opción de aplicación es mostrar el número de objetos que no caben en la lista. En este caso, al pasar el cursor sobre la etiqueta se muestra un Popover con la lista de las entidades restantes.

Las etiquetas también pueden usarse como tags para organizar entidades y facilitar el trabajo con ellas.

Al mostrar etiquetas en una tabla, limite el número de etiquetas en una celda (no más de 2-3 etiquetas en una fila y no más de 2 columnas con etiquetas en una tabla) y el número máximo de caracteres (no más de 20 caracteres seguidos de puntos suspensivos).

§Estructura

1 — Icono izquierdo: opcional y no interactivo. Se utiliza para una recuperación más rápida de la información.

2 — Texto: una etiqueta no debe exceder los 20 caracteres. Puede usar adjetivos (por ejemplo, Nuevo, Activo, Gratis), Participios (por ejemplo, Detenido), Sustantivos (por ejemplo, Descuento) y Adverbios. El texto de la etiqueta no debe contener verbos (por ejemplo, Habilitar). Si necesita usar verbos, use botones en su lugar.

3 — Una versión alternativa del texto en el formato "Clave: Valor", que se utiliza para marcar objetos manualmente. Por ejemplo, podría etiquetar el objeto "servicio: entrega" o "versión: 23".

4 — Botón derecho: interactivo. Puede ser un icono de salida o un icono de copia.

§Tamaños

Hay tres tamaños de etiqueta:

XS - A menudo se usa en tablas, listas, encabezados, ventanas emergentes y páginas de entidades.

S - Se utiliza para previsualizar marcas recién añadidas en formularios y otras áreas si hay suficiente espacio.

M - Se usa con menos frecuencia debido a su parecido con un botón.

§Temas

Sin color semántico

Default — La etiqueta predeterminada, que a menudo se utiliza para resaltar información sin coloración semántica.

Clear — No tiene fondo, solo un contorno. Se utiliza para un énfasis mínimo

Con coloración semántica

Unknown — Una opción neutral utilizada cuando no hay necesidad de enfocarse en la información contenida dentro de la etiqueta.

Accent — Se utiliza para resaltar información importante y para operaciones "en progreso".

Success — Se utiliza para indicar un proceso completado con éxito o la "salud" de una entidad.

Warning — Se utiliza para situaciones de emergencia, como para alertar al usuario sobre algo

Danger — Para llamar completamente la atención del usuario, como cuando ha ocurrido un error y se requiere acción inmediata para solucionarlo.

§Etiquetas semánticas vs Botones

Las etiquetas, incluidas aquellas con coloración semántica, se utilizan para indicar estados. La única forma de interactuar con ellas es pasar el cursor sobre la etiqueta o hacer clic en el icono. La etiqueta no se puede configurar como "seleccionada". Si necesita crear un elemento interactivo basado en etiquetas semánticas (por ejemplo, para filtros de estado), use botones. Tienen un estado presionado (aplicado) - seleccionado - y pueden usarse con colores semánticos.

§Modificaciones y estados

Todas las etiquetas tienen cinco estados: solo texto, icono antes del texto, icono después del texto, icono antes y después, y solo un icono.

Puede interactuar:

1. Con toda la etiqueta. Por ejemplo, para mostrar un Popover con información detallada al pasar el cursor sobre una etiqueta.

2. Solo con el icono derecho. Dependiendo del icono, hacer clic en él puede eliminar la etiqueta o copiar su valor.

Al agregar interacciones de etiqueta, asegúrese de que sean intuitivas y sencillas.

§Características adicionales

Puede crear filtros dinámicos para ordenar contenido basado en la etiqueta. Por ejemplo, hacer clic en el icono más agrega un nuevo valor, mientras que hacer clic en el icono de cruz cancela el filtro.

Si su interfaz permite a los usuarios crear sus propias etiquetas y marcar objetos, también deberían poder agregarlas y eliminarlas.

§Personalización

Los colores, filetes, tamaños y rellenos de la etiqueta pueden personalizarse. El texto contenido dentro de la etiqueta debe ser fácil de leer.

Cambie la apariencia o el color de una etiqueta cuando un usuario pasa el cursor sobre ella para indicar la posibilidad de interacción.