Botón

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

§Apariencia

Hay cinco tipos de botones: de acento, primarios, semánticos, resaltados y de contraste.

§Acento

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

Elige entre estos tipos de botones de acento en función del grado de énfasis que quieras poner en las acciones de la interfaz. Usa Acción para la prioridad más alta, Acción esquematizada para prioridad media y Acción plana para operaciones secundarias o de menor prioridad.

Utilice los botones de acento en la interfaz con moderación y, si es posible, limite su número a uno por página (excepto en los cuadros de diálogo). De esta manera, puede 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.

§Primaria

Los botones principales realizan las acciones principales y de uso común en la interfaz. Estos botones tienen varios estilos: Normal, contorneado, plano y secundario plano. Elige entre estos estilos en función del grado de énfasis que quieras poner en determinadas acciones de la interfaz. Por ejemplo, un botón Normal es adecuado para acciones estándar, un botón Contorneado para acciones con prioridad media y los botones Plano y Secundario Plano están diseñados para operaciones secundarias o menos importantes.

§Semántica

Los botones semánticos transmiten un contexto o acción específicos, con un significado para el usuario. Utilícelos 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

Utilízalos para acciones relacionadas con la obtención de información adicional, sugerencias o contexto. Los botones de información también pueden servir como hipervínculos cuando necesita resaltar una opción para navegar a otro recurso. Por ejemplo: Más información, documentación y ayuda.

Éxito

Utilízalos para resaltar las acciones completadas con éxito.

Advertencia

Utilízalos para resaltar las acciones que requieren la atención del usuario debido a posibles riesgos o advertencias. Estos botones ayudan a los usuarios a comprender las posibles consecuencias de su acción y fomentan la cautela.

Peligro

Utilízalos para resaltar acciones que podrían ser destructivas o tener consecuencias negativas. Recomendamos usar este botón con cautela y solo cuando sea realmente necesario para resaltar posibles aspectos negativos (por ejemplo, eliminación, detención, desconexión).

Levantado

Los botones en relieve son un tipo de botón que sobresale por encima del contenido. Utilízalo para resaltar acciones importantes en la pantalla, normalmente con una posición fija. Este tipo de botón es adecuado para operaciones clave que el usuario debería notar de inmediato.

Estos botones también se utilizan con frecuencia en interfaces de mapas y aplicaciones basadas en imágenes para diversas acciones, como el zoom, la panorámica u otras manipulaciones con datos de imágenes.

Botones contrastantes

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

Estos botones ayudan a resaltar las acciones y a garantizar una buena visibilidad en diversos entornos, por ejemplo, en pancartas

§Anatomía

La anatomía de un botón de 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 transmite de forma clara e inequívoca el propósito del botón, especialmente cuando el texto es breve e informativo. Por ejemplo, puedes usar este botón para acciones como crear o cancelar.
2. Iconos a la derecha: Botón donde se coloca el icono a la derecha del texto. Esta opción es útil para presentar diferentes maneras de realizar la misma acción. Utilice este botón, por ejemplo, para la acción de guardar, donde el usuario tiene varias opciones entre las que elegir (guardar como: PDF, RTF, HTML)
3. Icono a la izquierda: Botón donde se coloca el icono a la izquierda del texto. Utilice esta opción cuando el icono contenga información importante y necesite resaltarlo. Por ejemplo, puede usar dicho botón para iniciar o eliminar acciones.
4. Iconos a la derecha y a la izquierda: Botón con iconos situados a ambos lados del texto. Utilice esta opción para subrayar una acción clave con un icono y proporcionar diferentes rutas para su ejecución. Por ejemplo, este botón se puede usar para la acción de agregar, donde el usuario tiene varias opciones para elegir (agregar: proyecto, recurso, documento).
5. Solo icono: Botón que consiste únicamente en un icono y no contiene texto. Utilice esta opción cuando la información del botón se pueda entender visualmente y no necesite 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 eliminación en una lista de elementos. En este contexto, puede proporcionar la opción de eliminación como un icono de papelera sin una etiqueta de texto.

§Estados

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

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

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

Desactivar: Estado en el que el botón no está disponible temporalmente para interactuar. Para una mejor experiencia de usuario, te recomendamos que expliques por qué se ha desactivado el botón, especialmente si no es intuitivo. Puedes presentar esta explicación en forma de texto junto al botón o en forma de información sobre herramientas al pasar el puntero del ratón.

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

Seleccionado: Estado utilizado para los elementos intercambiables en los que el usuario puede seleccionar una de varias opciones. Un botón en el estado «Seleccionado» indica el estado u opción actualmente seleccionados.

§Tallas

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

**** El XS es un tamaño adicional que se usa para acciones en componentes de tamaños limitados.

**** La S se usa en situaciones en las que los botones estándar son demasiado grandes y ocupan mucho espacio, como mesas o tarjetas pequeñas.

M es la talla principal que recomendamos por defecto.

**** La L se usa para resaltar las acciones principales, en formularios de creación, ventanas modales o ventanas emergentes.

XL se usa cuando es necesario resaltar las acciones y tienes suficiente espacio en tu sitio web o página de destino.

§Formulario

Con la propiedad «pin», puede controlar la forma de los botones, estableciendo su estilo mediante los siguientes valores:

ronda: Botón con forma redonda, es decir, esquinas redondeadas en ambos lados. Este estilo le da al botón un aspecto suave y moderno, por lo que es amigable y agradable interactuar con él.

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

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

círculo: Botón con forma circular en ambos lados.

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

§Anchura

El ancho predeterminado del botón se ajusta automáticamente al texto, lo que permite que el botón se estire para adaptarse a todo el texto sin truncarlo. Sin embargo, si necesita controlar el ancho del botón, puede usar dos propiedades principales: automática y máxima.

automático: Restringe las dimensiones de los botones para evitar que se extiendan 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, lo que indica la presencia de texto adicional.

máximo: Establece un ancho de botón fijo igual al ancho del contenedor principal. Si el contenido del botón supera este ancho, también se trunca con puntos suspensivos, lo que mantiene la interfaz compacta y evita que el contenedor se desborde.

§Recomendaciones

Uso

• Expresa de forma clara y sucinta el texto del botón para que los usuarios entiendan de inmediato lo que sucederá después de hacer clic.
• Cuando utilices íconos, asegúrate de que transmitan claramente su significado y que tus usuarios los reconocerán fácilmente.
• Mantén un equilibrio entre los iconos y el texto para que ambos elementos sean visibles y legibles, y ninguno de los dos domine.
• Cuando utilices botones que solo contienen iconos, añade información sobre las acciones al pasar el ratón sobre ellos para que los usuarios puedan ver lo que significa el icono.

Redacción de textos

• Las palabras del botón deben transmitir de manera clara y concisa la esencia de la acción que se producirá después de hacer clic. Evite las frases largas o las abreviaturas poco claras.
• Usa verbos que describan las acciones del usuario. Por ejemplo, guardar, enviar, eliminar.
• Evita usar palabras o frases negativas en los botones. Las instrucciones negativas pueden causar confusión.
• Mantén un estilo y un formato coherentes 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.