Componentes Índice de páginas
Botones
Componentes principales
Los botones son elementos sobre los que se puede interactuar para realizar acciones o navegar.
Índice de apartados de esta página
Anatomía #
- Contenedor: Borde de 1px exterior y redondeo de 3px. Al accionarlo se desplaza 1px hacia abajo.
- Etiqueta: Texto base o sm según el tamaño del botón.
- Icono: Elemento opcional de apoyo final o inicial.
Tamaños #
Tamaño estándar #
Utilizamos este botón por defecto en la mayoría de situaciones. Prioriza usar este tamaño por motivos de accesibilidad.
Tamaño pequeño #
Usa este tamaño 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. - Los botones que enlazan a otras páginas se construyen con una etiqueta
<a>
Basado en el patrón button de W3C
| 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 lector de pantalla describe la acción definida con el aria-label. Debes describir la acción, no el icono. |
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 #
No empieces la etiqueta con minúscula.
Intenta no utilizar más de dos palabras.
Concreta la acción con un verbo en infinitivo.
No utilices mayúsculas.
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.
No utilices dos iconos simultáneamente.
Cuando tengas que reforzar la pertenencia de la persona usuaria, utiliza verbos en primera pesona.
Ú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 grupos de acciones y patrones de avanzar y retroceder.
Deberás maquetar cada botón del grupo con un item <li> dentro de una lista sin orden <ul>.
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.
Intenta no utilizar más de dos tipos de botones en el mismo grupo
No utilices dos botones primarios en el mismo grupo ni en la misma página.