Índice de apartados de esta página
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 #
- Contenedor: Borde de 1px exterior y redondeo de 3px.
- Etiqueta: Peso 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 #
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.
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.
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 acciones de página y patrones de encabezados de página.
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.