Etiqueta

Aquí tienes la traducción de la guía de diseño al español, manteniendo un tono natural y conservando los elementos técnicos:

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 formato Clave:Valor.

§Cuándo usar

Las etiquetas se utilizan en todas partes (por ejemplo, en tarjetas, tablas, páginas de entidades) para indicar atributos de objetos y ayudar a los usuarios a identificar y categorizar contenido rápidamente. Las etiquetas suelen mostrarse 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 ratón por encima de la etiqueta se muestra un Popover con la lista de las entidades restantes.

Las etiquetas también se pueden usar como "tags" para organizar entidades y facilitar su manejo.

Al mostrar etiquetas en una tabla, limita 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 misma 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 de información más rápida.

2 — Texto: una etiqueta no debe exceder los 20 caracteres. Puedes 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 necesitas usar verbos, utiliza botones en su lugar.

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

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

§Tamaños

Hay tres tamaños de etiqueta:

XS - Se utiliza a menudo en tablas, listas, encabezados, popups 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 utiliza con menos frecuencia debido a su parecido con un botón.

§Temas

Sin color semántico

Predeterminado — La etiqueta predeterminada, que se utiliza a menudo para resaltar información sin color semántico.

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

Con color semántico

Desconocido — Una opción neutral utilizada cuando no hay necesidad de centrarse en la información contenida en la etiqueta.

Acento — Se utiliza para resaltar información importante y para operaciones "en curso".

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

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

Peligro — Para captar la atención total del usuario, como cuando ha ocurrido un error y se requiere una acción inmediata para solucionarlo.

§Etiquetas Semánticas vs. Botones

Las etiquetas, incluidas las que tienen color semántico, se utilizan para indicar estados. La única forma de interactuar con ellas es pasando el ratón por encima de la etiqueta o haciendo clic en el icono. La etiqueta no se puede establecer en "seleccionado". Si necesitas crear un elemento interactivo basado en etiquetas semánticas (por ejemplo, para filtros de estado), utiliza botones. Estos tienen un estado presionado (aplicado) - seleccionado - y se pueden usar 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.

Puedes interactuar:

1. Con toda la etiqueta. Por ejemplo, para mostrar un Popover con información detallada al pasar el ratón por encima de una etiqueta.

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

Al añadir interacciones a las etiquetas, asegúrate de que sean intuitivas y sencillas.

§Características adicionales

Puedes crear filtros dinámicos para ordenar contenido basándote en la etiqueta. Por ejemplo, hacer clic en el icono de más añade un nuevo valor, mientras que hacer clic en el icono de cruz cancela el filtro.

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

§Personalización

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

Cambia la apariencia o el color de una etiqueta cuando el usuario pasa el ratón por encima para indicar la posibilidad de interacción.