DESY

Sistema de Diseño del Gobierno de Aragón.

Botones

Los botones son elementos sobre los que se puede interactuar para realizar acciones o navegar.

Anatomía

Por lo general están compuestos por una etiqueta única con la acción que realiza y pueden mostrar un icono de apoyo a izquierda o derecha del texto. En casos excepcionales se puede usar un botón únicamente con icono, sin etiqueta de texto visible.

Recomendaciones generales

  • La etiqueta debe describir de manera clara y concisa la acción que se llevará a cabo al pulsarlo.
  • Ser recomienda no usar más de dos palabras en la etiqueta, por ejemplo “Ver documento” “Firmar solicitud”
  • Cuando se usen verbos se recomienda el uso de infinitivos “Eliminar”, “Continuar”
  • En caso de acciones que se tenga que reforzar el caracter de individualidad o pertenencia del la persona usuaria, se pueden emplear verbos en primera persona que refuercen el caracter personal de la acción. Por ejemplo: Mi perfil, Mis datos o Indentificarme.

Tipos de botones

Botones por defecto

El botón por defecto es el botón estándar para la mayoría de los casos de uso. El estilo delineado pone menos énfasis en estos botones, pudiendo usar varios por página o grupo de botones.

Botones primarios

Estos botones son los que tienen más énfasis. En caso de usarlo en una página no se recomienda que se use más de una vez.

Nunca deben duplicarse situándose uno al lado del otro. Se utiliza cuando una acción es claramente más importante que las otras acciones y se necesita llamar la atención sobre ella.

No todas las funciones necesitan tener acciones primarias.

Botones transparentes

El botón transparente debe utilizarse para las acciones menos importantes. Este botón se utiliza en contenido secundario, para evitar competencia con las llamadas a acción principales. Lo ideal es que el usuario vea el botón principal y luego (si no es relevante) lo omita en el transparente. Por ejemplo, se utiliza para acciones como deshacer, volver, etc...

Botones de alerta

Los botones de alerta se deben emplear, en casos muy concretos, especialmente para acciones destructivas o que no se puedan deshacer.

Tamaños

Tamaño estándar

Utilizar por defecto para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Tamaño pequeño

Se recomienda su uso cuando el elemento estándar sea demasiado grande para el espacio donde debe de encajar, por ejemplo dentro de tablas, cards, grupos de filtros o similares.

No deben convivir en un mismo grupo componentes de diferentes tamaños.

Estados

Estado activo

Es el estado habitual de un botón con el que se puede interactuar y al pulsarlo realiza una acción. Este estado incluye los estados hover y focus que nos ayudan a identificar distintos momentos de la interacción con el componente.

Estado desactivado

Por lo general no se recomienda el uso de botones en estado desactivado. Es mejor que al pulsar el botón aparezca un mensaje de error indicando que hay un problema con la acción que se desea realizar o que directamente no se muestre el botón. Pero existen situaciones en las que es conveniente que el usuario entienda que esa acción es posible, pero que temporalmente no está disponible, en estos casos se puede usar el estado desactivado, pero debe quedar claro el motivo por el cual el botón está desactivado.

Estado cargando y éxito

Se recomienda el uso de este estado cuando al pulsar un botón la acción que realiza no es inmediata y requiere de cierto tiempo para su ejecución, este estado desactiva temporalmente el botón, para evitar que se pulse varias veces y da feedback al usuario de que se está realizando una acción. Una vez finalizada la acción se puede cambiar el botón al estado éxito o devolverlo a su estado activo según convenga.

Iconos

Se puede usar iconos en botones, siempre que sea de manera puntual y porque se quiere destacar la acciones especialmente sobre otros botones o que sea necesario un apoyo visual para entender mejor la acción del botón. por ejemplo en botones de descarga.

Por lo general no se recomienda usar botones sin etiqueta y únicamente con icono, pero se pueden emplear en casos en los que el espacio sea muy reducido y sea imposible incluir la etiqueta y siempre que la acción que representa el icono sea inequívoca y clara.

Layout y grupos de botones

  • No usar más de un botón primario por página o vista.
  • El botón más importante dentro de un grupo de botones, debe ubicarse lo más próximo posible a los límites de la pantalla, quedando así siempre en primer lugar o en último, dependiendo de la alineación del grupo de botones.
  • Se recomienda no usar más de dos tipos de botones en el mismo grupo.