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.

Índice de apartados de esta página

Anatomía

Anatomía de un botón
  1. Contenedor: Borde de 1px exterior y redondeo de 3px. Al accionarlo se desplaza 1px hacia abajo.
  2. Etiqueta: Texto base o sm según el tamaño del botón.
  3. Icono: Elemento opcional de apoyo final o inicial.

Tamaños

Tamaño estándar

Construcción de un botón 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

Construcción de un botón 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.

Variantes

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.

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.

Con 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.

Accesibilidad

Cómo funciona

Elemento button al que el usuario llega a través del foco del teclado y espera realizar una acción. El lector de pantalla debe describir claramente cuál es la acción.

Basado en el patrón button de W3C

Qué tener en cuenta
Qué usar Dónde Función
aria-hidden=true SVG que apoya a la etiqueta de texto Oculta el icono a lectores de pantalla, el texto ya describe la acción del botón.
role=img y aria-label SVG sin etiqueta de texto El icono del botón actúa como una imagen y el lector de pantalla describe la acción definida con el aria-label.
title Botón que enlaza con target El title debe avisar que el enlace se va a abrir en ventana o pestaña nueva, dependiendo de dónde apunte el target.
span con .sr-only Seguido del texto del botón Extiende la descripción de la acción para los lectores de pantalla.
disabled:true Parámetro Nunjucks de componente Aplica un disabled=true al botón que anuncia al lector de pantalla que está deshabilitado.
element:input Parámetro Nunjucks de componente Cambia la etiqueta button por la etiqueta input con type=submit para el envío de formularios.

Buenas prácticas

Etiqueta con minúsculas.
Incorrecto

No empieces la etiqueta con minúscula.

Etiqueta con cuatro palabras.
Incorrecto

Intenta no utilizar más de dos palabras.

Etiqueta con sustantivo.
Incorrecto

Concreta la acción con un verbo en infinitivo.

Etiqueta en mayúsculas.
Incorrecto

No utilices mayúsculas.

Etiqueta con icono incorrecto.
Incorrecto

No utilices iconos de apoyo que no tengan relación con la acción que se va a relizar y colócalos en una posición lógica.

Etiqueta con dos iconos.
Incorrecto

No utilices dos iconos simultáneamente.

Etiqueta con verbos en primera persona.
Correcto

Cuando tengas que reforzar la pertenencia de la persona usuaria, utiliza verbos en primera pesona.

Botón sólo con icono.
Correcto

Únicamente en casos cuando el espacio sea muy reducido y no permita colocar etiqueta en el botón, puedes incluir sólo el icono. Ten en cuenta que la acción que representa debe ser inequívoca y clara.

Grupos de botones

Consulta las agrupaciones habituales en patrones de acciones de página y patrones de encabezados de página.

Deberás maquetar cada botón del grupo con un item li dentro de una lista sin orden ul.

Construcción de grupos de botones.
Correcto

Utiliza un sato entre botones de 8px gap-sm.

El botón más importante dentro del grupo 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 su alineación.

Grupo de botones con tres tipos de botones.
Incorrecto

Intenta no utilizar más de dos tipos de botones en el mismo grupo

Grupo de botones con dos grupos primarios.
Incorrecto

No utilices dos botones primarios en el mismo grupo ni en la misma página.