Buttons

Los botones son componentes del interfaz que permiten a los usuarios realizar acciones y así mismo tomar decisiones.

La marca digital presenta 3 tipos de botones en función de su énfasis. El turquesa es el color principal de interacción. Se utilizará para todos los botones y enlaces, conjuntamente a sus variantes.

Variaciones y tipos

Primario

El botón primario sirve para representar las acciones más importantes. Solo debe haber un botón primario por cada módulo dentro de una misma página.

  • Color
    El color del botón primario cambia en función del fondo sobre el que existe. Hay 2 tipos de colores: turquesa y blanco.
  • Iconos
    Pueden usarse botones secundarios con iconos cuando sea necesario añadir más claridad en la acción. El icono se colocará a la izquierda o a la derecha del texto, dependiendo de las necesidades del producto o herramienta.

Secundario

El botón de texto es para acciones con menor importancia. Está destinado a combinarse con otros tipos de botones para mostrar acciones menos necesarias y nunca debe ser el único botón en un módulo.

  • Color
    El color del botón secundario será azul turquesa claro y funcionará perfectamente con cualquiera de los 2 primarios existentes, turquesa y blanco.
  • Tamaño
    Los botones secundarios se pueden usar con dos tamaños distintos: M y S. El tamaño M es el tamaño a utilizar siempre que se pueda, mientras que el tamaño S queda restringido a elementos de interacción donde el espacio es más crítico, como barras de navegación y acciones contextuales dentro de componentes.
  • Iconos
    Pueden usarse botones secundarios con iconos cuando sea necesario añadir más claridad en la acción. El icono se colocará a la izquierda o a la derecha del texto, dependiendo de las necesidades del producto o herramienta.

Action buttons

El botón de acción es para acciones con menor importancia. Está destinado a utilizarse en pantallas en las que los botones no conformen el elemento principal y cumplen una función similar a los links.

  • Color
    El color del botón de acción es el azul turquesa claro, igual que el botón secundario.
  • Tamaño
    Los botones secundarios se pueden usar con dos tamaños distintos: Medium y Small. El tamaño Medium es el tamaño a utilizar siempre que se pueda, mientras que el tamaño Small queda restringido a elementos de interacción donde el espacio es más crítico, como barras de navegación y acciones contextuales dentro de componentes.

Estados

  • Default
    Su estado por defecto.
  • Active
    Estado que sucede cuando el botón está realizando la interacción.
  • Focus
  • Disabled
    Comunica que este elemento no realiza ninguna interacción.

Comportamiento

Botón primario + secundario (Agrupación horizontal)

En presencia de botón primario y secundario, el botón primario se coloca a la derecha mientras que el botón secundario a la izquierda.
Padding: 12px

Botón primario + link (Agrupación horizontal)

En presencia de un botón primario y un botón de texto, colocaremos el botón de texto a la derecha con el objetivo de compensar el peso de alineación.
Padding: 12px

Botón primario + secundario (Agrupación vertical)

En presencia de botón primario y secundario, el botón primario se coloca a la arriba mientras que el botón secundario abajo.
Padding: 16px

Botón primario + link (Agrupación vertical)

En presencia de botón primario y un botón de texto, el botón primario se coloca a la arriba mientras que el botón de texto abajo.
Padding: 16px