Botones

Definición

Los botones son elementos interactivos que permiten a los usuarios realizar una acción (p.ej. buscar, enviar un formulario, suscribirse...).

Anatomía

Las partes del componente son:

1. Contenedor: Delimita la zona activa del botón.
2. Etiqueta (opcional): Describe la acción que se produce al activar el botón. Es preferible usar verbos en infinitivo (buscar, aceptar...).
3. Icono (opcional): Elemento gráfico que representa la acción que se ejecutará al activar el botón. 

Tipos

Se dispone de varios tipos que atienden a diversas necesidades.

Botón primario

El tipo de botón primario recoge la acción principal de la página o del componente del sistema de diseño. Por este motivo, sólo debe haber un botón primario en cada interacción.  Por ejemplo, en un formulario el botón de Enviar debe estar destacado y ser fácilmente reconocible para que el usuario complete la funcionalidad prevista.

Si una interacción no tiene una acción principal, utiliza botones secundarios. Por ejemplo, en el componente de valoración de contenidos se utilizan dos botones secundarios para responder a la pregunta "¿Te ha resultado útil?" con "Sí" o "No".

Botón secundario

El tipo de botón secundario recoge acciones secundarias relacionadas con la interacción (p.ej. adjuntar un fichero antes de enviar un formulario). Este tipo de botón pone menos énfasis en estos botones, por lo que se pueden usar uno o varios por página o interacción.

Estados

Estado activo

Es el estado habitual de un botón con el que se puede interactuar.

Estado inactivo

Los botones en estado inactivo representan acciones que actualmente no están disponibles para el usuario. Por ejemplo, el botón "Enviar" de un formulario puede estar inactivo hasta que la persona usuaria haya marcado que acepta la cláusula de protección de datos.

Pautas de uso

Utiliza enlaces para navegar

• Utiliza enlaces para navegar, para descargar ficheros y para hacer interactivos teléfonos y direcciones de correo electrónico.
• Utiliza botones para realizar transacciones (enviar un formulario, realizar una búsqueda...)

Utiliza etiquetas comprensibles

• Las etiquetas de los botones deben ser breves, claras y precisas. Intenta utilizar tres palabras o menos. Evita etiquetas ambiguas como "Haz clic aquí" o "Más".
• Utiliza los verbos en infinitivo.

Utiliza iconos significativos

• El icono debe ser representativo de la acción del botón.
• Cuando el icono representa una acción de forma clara e inequívoca, puedes prescindir de la etiqueta.

Ubica el botón primario en la posición más visible

Al presentar juntos un botón primario y uno o varios botones secundarios, el botón primario debe ocupar la posición más destacada:

• Si los botones se presentan en una misma línea, el botón primario debe aparecer en la posición más cercana al margen derecho.
• Si los botones se presentan apilados verticalmente, el botón primario debe aparecer en primera posición.

Marca las acciones destructivas

En los botones primarios y secundarios se puede aplicar la paleta de colores de estado. En concreto, en el caso de acciones destructivas debe usarse el color asociado a error (#D4403A).