Botón

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:

Un botón es un elemento interactivo de la interfaz de usuario que, al hacer clic, realiza una acción, por ejemplo: enviar un formulario, guardar cambios o pasar al siguiente paso. Si necesitas navegar a otra página o sitio web, utiliza un enlace.

§Apariencia

Hay cinco tipos de botones: acento, primario, semántico, elevado y de contraste.

§Acento

Los botones de acento resaltan las acciones clave y atraen la atención del usuario hacia operaciones importantes. Tienen tres estilos principales: Acción, Acción contorneada y Acción plana.

Elige entre estos tipos de botones de acento según el grado de énfasis que quieras dar a las acciones en la interfaz. Utiliza Acción para la máxima prioridad, Acción contorneada para la prioridad media y Acción plana para operaciones de menor prioridad o secundarias.

Utiliza los botones de acento en la interfaz con moderación y, si es posible, limita su número a uno por página (excepto en los cuadros de diálogo). De esta manera, puedes enfatizar la importancia y resaltar la acción principal para el usuario, pero mitigar el riesgo de abrumar la interfaz con demasiados elementos de acento.

§Primario

Los botones primarios realizan las acciones principales y de uso común en la interfaz. Estos botones tienen varios estilos: Normal, Contorneado, Plano y Plano secundario. Elige entre estos estilos según el grado de énfasis que quieras dar a ciertas acciones en la interfaz. Por ejemplo, un botón Normal es adecuado para acciones estándar, un botón Contorneado para acciones de prioridad media, y los botones Plano y Plano secundario están pensados para operaciones menos importantes o secundarias.

§Semántico

Los botones semánticos transmiten un contexto o acción específica, llevando un significado para el usuario. Úsalos para ayudar a los usuarios a comprender fácilmente qué operaciones se realizan y cuál es su significado.

Los botones semánticos tienen cuatro estilos principales: Información, Éxito, Advertencia, Peligro.

§Información

Úsalos para acciones relacionadas con la obtención de información adicional, pistas o contexto. Los botones de información también pueden servir como hipervínculos cuando necesitas resaltar una opción para navegar a otro recurso. Por ejemplo: Más información, Documentación, Ayuda.

Éxito

Úsalos para resaltar acciones completadas con éxito.

Advertencia

Úsalos para resaltar acciones que requieren la atención del usuario debido a riesgos o advertencias potenciales. Estos botones ayudan a los usuarios a comprender las posibles consecuencias de su acción y fomentan la precaución.

Peligro

Úsalos para resaltar acciones que podrían ser destructivas o tener consecuencias negativas. Recomendamos usar este botón con precaución y solo donde sea realmente necesario para resaltar aspectos negativos potenciales (por ejemplo, eliminar, detener, desconectar).

Elevado

Los botones elevados son un tipo de botón que sobresale por encima del contenido. Úsalos para resaltar acciones importantes en la pantalla, generalmente con una posición fija. Este tipo de botón es adecuado para operaciones clave que el usuario debe notar de inmediato.

Estos botones también se utilizan a menudo en interfaces de mapas y aplicaciones basadas en imágenes para diversas acciones, como hacer zoom, desplazarse o realizar otras manipulaciones con datos de imagen.

Botones de contraste

Los botones de contraste son tipos especiales de botones que se utilizan para resaltar acciones sobre un fondo complejo. Crean un contraste brillante y claro, proporcionando una excelente visibilidad incluso en fondos diversos y saturados, como banners o materiales de marketing.

Estos botones ayudan a resaltar acciones y garantizan una buena visibilidad sobre fondos diversos, por ejemplo, en banners.

§Anatomía

La anatomía de un botón en la interfaz incluye varias opciones de diseño:

1. Solo texto: Botón que contiene solo texto. Este botón es útil cuando el texto comunica de forma clara e inequívoca el propósito del botón, especialmente cuando el texto es corto e informativo. Por ejemplo, puedes usar este botón para acciones como crear o cancelar.
2. Iconos a la derecha: Botón donde el icono se coloca a la derecha del texto. Esta opción es útil para presentar diferentes formas de realizar la misma acción. Utiliza este botón, por ejemplo, para la acción de guardar, donde el usuario tiene varias opciones para elegir (guardar como: PDF, RTF, HTML).
3. Icono a la izquierda: Botón donde el icono se coloca a la izquierda del texto. Utiliza esta opción cuando el icono transmite información importante y necesita ser resaltado. Por ejemplo, puedes usar este botón para las acciones de iniciar o eliminar.
4. Iconos a la derecha e izquierda: Botón con iconos colocados a ambos lados del texto. Utiliza esta opción para subrayar una acción clave con un icono y proporcionar diferentes vías para su ejecución. Por ejemplo, este botón se puede usar para la acción de añadir, donde el usuario tiene varias opciones para elegir (añadir: proyecto, recurso, documento).
5. Solo icono: Botón que consta únicamente de un icono y no contiene texto. Utiliza esta opción cuando la información del botón se puede entender visualmente y no requiere explicaciones de texto adicionales. También puedes usarlo para agrupar varias acciones de forma compacta en un espacio limitado, sin dejar espacio para botones con etiquetas de texto. Por ejemplo, un botón de eliminar en una lista de elementos. En este contexto, puedes proporcionar la opción de eliminar como un icono de papelera sin etiqueta de texto.

§Estados

Cada botón en la interfaz tiene cinco estados básicos, que indican visualmente la disponibilidad y la acción actual del botón para el usuario.

Predeterminado: Estado principal del botón, en el que está listo para la interacción y espera las acciones del usuario.

Hover: Estado en el que el botón está listo para la interacción y espera las acciones del usuario.

Deshabilitado: Estado en el que el botón no está disponible temporalmente para la interacción. Para una mejor experiencia de usuario, recomendamos explicar por qué el botón está deshabilitado, especialmente si no es intuitivo. Puedes presentar esta explicación como texto junto al botón o como una información sobre herramientas al pasar el ratón por encima.

Cargando: Estado que indica que el sistema está ejecutando una operación en respuesta a una acción iniciada por el usuario.

Seleccionado: Estado utilizado para elementos conmutables donde el usuario puede seleccionar una de varias opciones. Un botón en estado "Seleccionado" indica el estado u opción actualmente seleccionado.

§Tamaños

Cada botón puede tener cuatro tamaños, que permiten elegir la opción más adecuada según el contexto.

XS es un tamaño adicional que se utiliza para acciones en componentes de tamaño limitado.

S se utiliza en situaciones donde los botones estándar son demasiado grandes y ocupan mucho espacio, como en tablas o tarjetas pequeñas.

M es el tamaño principal que recomendamos por defecto.

L se utiliza para resaltar acciones primarias, en formularios de creación, ventanas modales o emergentes.

XL se utiliza donde las acciones necesitan ser resaltadas y tienes suficiente espacio en tu sitio web o página de destino.

§Forma

Con la propiedad "pin", puedes controlar la forma de los botones, estableciendo su estilo con los siguientes valores:

round: Botón con forma redonda, es decir, esquinas redondeadas en ambos lados. Este estilo le da al botón un aspecto suave y moderno, haciéndolo amigable y agradable de interactuar.

brick: Botón con esquinas afiladas en ambos lados.

clear: Botón con esquinas afiladas y sin contorno en ambos lados.

circle: Botón con forma circular en ambos lados.

También puedes combinar estas propiedades en diferentes variaciones, creando estilos únicos para tus botones según el concepto de diseño y los requisitos de la interfaz.

§Ancho

El ancho predeterminado del botón se ajusta automáticamente al texto, permitiendo que el botón se estire en anchura para acomodar todo el texto sin truncamiento. Sin embargo, si necesitas controlar el ancho del botón, puedes usar dos propiedades principales: auto y max.

auto: Restringe las dimensiones del botón para evitar que se extienda más allá de los límites del contenedor. Si el contenido del botón no cabe en el contenedor, se oculta con puntos suspensivos, indicando la presencia de texto adicional.

max: Establece un ancho de botón fijo igual al ancho del contenedor padre. Si el contenido del botón excede este ancho, también se trunca con puntos suspensivos, manteniendo la interfaz compacta y evitando el desbordamiento del contenedor.

§Recomendaciones

Uso

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

• Formula el texto de los botones de forma clara y concisa para que los usuarios comprendan inmediatamente qué sucederá después de hacer clic.
• Al usar iconos, asegúrate de que transmitan claramente su significado y que tus usuarios los reconozcan fácilmente.
• Mantén un equilibrio entre iconos y texto para que ambos elementos sean visibles y legibles, y ninguno domine.
• Al usar botones que solo contienen iconos, añade tooltips de acción al pasar el ratón por encima para que los usuarios puedan ver qué significa el icono.

Redacción de textos

• Las palabras en el botón deben transmitir de forma clara y concisa la esencia de la acción que ocurrirá después de hacer clic. Evita frases largas o abreviaturas poco claras.
• Utiliza verbos que describan las acciones del usuario. Por ejemplo, guardar, enviar, eliminar.
• Evita palabras o frases negativas en los botones. Las instrucciones negativas pueden causar confusión.
• Adhiérete a un estilo y formato consistentes para el texto en todos los botones de la interfaz. Esto ayuda a los usuarios a navegar y comprender fácilmente qué acciones están disponibles.