Tipos de botones
Botones primarios
Los botones primarios se usan generalmente para acciones principales y las denotadas como "positivas". Debe haber un solo botón principal por página.
Botones secundarios
Los botones secundarios se usan para llamadas a la acción secundarias en una página. Se pueden usar, también, en combinación con botones primarios.
Botones de éxito
Los botones de éxito son utilizados para avisar al usuario que se encuentra en el último paso antes de recibir una respuesta por parte del sistema o completar una navegación.
Botones de peligro
Están diseñados para que los usuarios piensen detenidamente antes de usarlos. Son utilizados en acciones permanentes e irreversibles que no pueden deshacerse.
Botones fantasma
Están diseñados para utilizar en acciones secundarias o de poca relevancia dentro de la interfaz. Se diferencian de los botones secundarios por su poco peso visual.
Botones con borde
A diferencia del resto de los botones, éstos están delineados, lo cual les otorga menos jerarquía visual que los botones sólidos. Son utilizados para denotar menos énfasis y pueden combinarse con otros estilos de botones.
Botones con spinner
Los botones con spinner comunican al usuario que una acción se está procesando y debe esperar.
Botones expandibles
Este botón expandible está construido con la clase btn-block para que se adapte a los distintos contenedores, tomando la medida del ancho de su elemento padre.
Etiquetas e íconos
Es importante que los botones cuenten con una etiqueta corta que describa su función, a menos que solo utilice un ícono que sea de comprensión universal y accesible para todos los usuarios.
Botón con etiqueta e ícono
En caso de que se utilice un ícono, este no debe ser únicamente decorativo, sino que debe tener una asociación clara con el texto de la etiqueta.
Botón sin etiqueta
Si se desea crear un botón de acción de solo ícono, es posible ocultar la etiqueta y solo mostrar el ícono. Sin embargo, en este caso, es necesario que el ícono tenga una fuerte relación con la función del botón y, en caso de que el usuario requiera mayor información, deberá aparecer en un tooltip al pasar el cursor sobre el botón.
Tamaños
Los botones pueden ser grandes, medianos o chicos. El tamaño mediano es la opción predeterminada y más utilizada. La diferencia de tamaño se usan para dar jerarquía dentro de la página.
Diseño y estructura (contexto de uso)
Jerarquías
Es importante establecer una diferencia de jerarquías entre los botones dentro de la interfaz para que las personas usuarias puedan completar una navegación, flujo o acción determinada. Los botones principales pueden ir acompañados de botones secundarios o de botones con menor jerarquía.
Orden y alineación
En los modales los botones primarios siempre aparecen a la derecha. Si hay botones secundarios se muestran a la izquierda del botón primario.
Cuando la acción principal implica un paso de navegación hacia adelante, como en un formulario, los botones se justifican a la derecha. Esta posición transmite la intención del "siguiente paso".
En los bloques de texto los botones primarios siempre aparecen a la izquierda.
Si hay botones secundarios aparecen a la derecha del botón primario.
En acciones principales los botones se deben justificar a la izquierda respetando el orden de lectura.
