Uso
Cuándo usar
- Para desencadenar una acción o evento (ej. enviar un formulario, abrir un menú o confirmar una operación).
- Como guía para avanzar o retroceder a través de flujos interactivos.
- Para enlaces de llamado a la acción (CTAs) que precisen mayor jerarquía visual y utilicen estilos de botón.
Cuándo no usar
- Para navegar a un nuevo destino externo o interno, utilizar un Enlace o un enlace con estilos de botón.
- Para un botón que desencadena opciones, considerar un Desplegable.
Tamaños
Existen 3 tamaños de botones: grandes, medianos y chicos; el botón grande es el tamaño de botón predeterminado.
Tipos
Cada tipo de botón tiene una función específica dentro de la interfaz, estableciendo una jerarquía a partir del color y el relleno.
Botón primario (primary)
Es el botón de mayor jerarquía, reservado para la acción clave en un flujo. Se recomienda utilizar un único botón primario por página.
Botón secundario (secondary)
Es el botón de segunda mayor jerarquía, y se utiliza para acciones complementarias/secundarias en un flujo.
Botón terciario (tertiary)
Es el botón con menor jerarquía, y se utiliza para acciones repetitivas y/o acciones que no están relacionadas al flujo principal.
Botón de éxito (success)
Se utiliza como botón de confirmación en flujos con pasos o instancias definitivas, como una acción con consecuencia positiva.
Botón de peligro (danger)
Se utiliza para acciones que podrían tener efectos destructivos o acciones que no pueden deshacerse (por ejemplo, eliminar o quitar).
Botón claro (light)
Se usa para garantizar la visibilidad y legibilidad de las acciones en las interfaces con fondos oscuros.
Botones con borde (outlined)
A diferencia del resto de los botones, éstos están delineados, lo que les otorga menos jerarquía visual que los botones rellenos. Son utilizados para acciones de menor énfasis, y pueden combinarse con otros estilos de botones.
Botón de acción para tabla
Se utiliza dentro de la celda de una Tabla, economizando el espacio disponible. No cuenta con relleno ni borde.
Uso de íconos
El botón puede incluir un ícono para reforzar la acción pretendida. También es posible utilizar un botón sólo con ícono.
Ejemplos de uso
Utilizar librerías que estén integradas a Obelisco, como Material Symbols o Boxicons.
No utilizar íconos de librerías que no estén en Obelisco.
Posición
- Ícono inicial (leading icon): se posiciona antes de la etiqueta y sirve de refuerzo visual. Esta posición se debe al orden de lectura de la persona usuaria.
- Ícono final (trailing icon): se posiciona luego de la etiqueta, y se utiliza en botones con acciones que denotan continuidad. En este caso, es recomendable usar un ícono de flecha o de chevrón.
Ejemplos de uso
Utilizar solo 1 ícono de soporte, como ícono inicial o como ícono final.
No utilizar 2 íconos de soporte al mismo tiempo.
Patrones de uso o combinación de botones
Existen reglas para el uso y la combinación de botones según su nivel de importancia en cada contexto. Esto se basa en el concepto de "espacios jerarquizados ", que implica asignar prioridades a los botones según su función dentro de una interfaz, asegurando que los elementos más relevantes sean más visibles y accesibles para las personas usuarias.
Niveles de jerarquía
Los niveles de jerarquía como primary, secondary y tertiary se asignan según el contexto de uso y la sección de contenido. Sin embargo, para evitar sobrecargar visualmente una pantalla, las acciones repetitivas dentro de una misma sección se trabajarán con botones outlined. Esto permite mantener una jerarquía clara y equilibrar el peso visual sin necesidad de mezclar diferentes niveles de botones en un mismo espacio.
Grupo para acciones primarias
Para contextos con acciones primarias y/o acciones principales. Normalmente, existe una única sección o agrupación de botones primarios por página. Por ejemplo, en el último paso de un formulario, antes de enviar los datos, puede haber 2 acciones: una para ver al detalle toda la información cargada, y una para enviar la información de manera definitiva; estas 2 acciones comparten el mismo nivel jerárquico, pero una tiene prioridad dentro de este nivel.
Grupo para acciones secundarias
Recomendado para contextos con acciones secundarias como el patrón de navegación por pasos como "Continuar" y "Volver". En caso de que sea una acción de finalización del proceso, como "Confirmar inscripción", se reemplaza el botón secundario relleno (secondary filled) por el botón primario relleno (primary filled).
Grupo con botones de peligro
Se usan en contextos de acciones destructivas o modales de peligro. Dentro de este grupo, se debe utilizar el estilo relleno (filled) del botón de peligro.
Grupo para acciones terciarias
Para contextos de acciones terciarias. Por ejemplo, en un formulario se puede utilizar el tertiary filled para editar una sub-sección, y botones outlined dentro de la subsección para adjuntar documentación o editar un campo específico.
Grupo para fondos oscuros
Para contextos de acciones primarias en fondos oscuros. Se utiliza el light outlined en vez del primary outlined, ya que, este último tiene bajo contraste en fondos oscuros.
Alineación
Se refiere a cómo se alinean los botones en relación al contenedor en el que se encuentra o a la página. La alineación de los accionables depende del contexto de uso y el espacio sobre el que interactúa la persona usuaria.
En dispositivos mobile y tablet, donde el contenido toma una estructura de columna, el cómo se reorganizan los botones depende de si se trata de una acción principal y general, o de una acción que solo refiere a un bloque de contenido.
Los accionables que cumplen la función de acción principal, normalmente adoptan la alineación en columna y de ancho completo. Por otro lado, los que hacen referencia a un bloque de contenido o son parte de una subsección, normalmente adoptan la alineación en fila y alineados a la izquierda.
Alineación a la izquierda
Para páginas donde el contenido requiere de una acción, que no hace referencia a continuidad o a navegación progresiva, es recomendable alinear las acciones principales a la izquierda, para reforzar el flujo de lectura y el orden de enfoque.
Alineación a la derecha
En los modales y formularios, en donde la acción principal implica un paso de navegación hacia adelante, los botones primarios siempre aparecen a la derecha.
Alineación a la derecha
Para acciones repetitivas que afectan a un bloque de contenido en la misma página, es recomendable utilizar un botón terciario alineado al título de la sección.
Alineación para dispositivos mobile
En dispositivos mobile la alineación depende del contexto de uso del botón. Existen 3 tipos de disposición para los accionables: en columna y de ancho completo, en fila y de ancho completo, y en fila y alineados a la izquierda.
- En columna y de ancho completo: permite 1 accionable por línea, uno debajo del otro.
- En fila y de ancho completo: permite 2 accionables en la misma línea, que toman el 100 % del espacio disponible.
- En fila y alineados a la izquierda: 2 accionables en la misma línea, que se ajustan al largo de su contenido.
Contenido
El texto de la etiqueta debe ser corto, conciso y descriptivo. Utilizar etiquetas como "Hacé click acá" o "Más info" no visibiliza lo que sucederá al interactuar con el botón. La etiqueta del botón siempre debe comenzar con un verbo que refleje la acción consecuente, por ejemplo,"Adjuntar archivo".
Ejemplos de uso
Utilizar hasta 3 palabras como etiqueta dentro de un botón.
No utilizar más de 3 palabras como etiqueta dentro de un botón.
Identificar una única acción por botón.
No identificar más de 2 acciones en un mismo botón.
Respetar el uso de mayúsculas al comienzo de la etiqueta.
No escribir la etiqueta utilizando mayúsculas sostenidas o solo minúsculas.
