Contexto

Los botones son, en pocas palabras, elementos de tu app web en los que los usuarios pueden hacer clic para ejecutar una acción.

Fuente de los botones

Se utiliza una familia de fuentes predeterminada para los botones principales y secundarios. Elige un tipo de letra con el grosor de fuente que prefieras, aunque te recomendamos que utilices “Bold” (Negrita).

Ten en cuenta que el botón terciario utilizará el estilo de fuente del cuerpo que se define en el artículo Tipografía.

Los botones deben cumplir con estos requisitos:

• Formato del archivo: OTF o TTF
• Preferiblemente fuente con grosor “Bold”
• Licencia

Colores

Color del texto y de los botones principales

Los botones principales se utilizan para representar las acciones principales en la pantalla. Estos se crean a partir de dos colores: el color de fondo y el color del texto del botón principal. Crea una combinación de manera que el texto sea legible.

1. Color de fondo del botón principal
2. Color del texto del botón principal

Color del texto y de los botones secundarios

Los botones secundarios se suelen colocar como acción alternativa (segunda en importancia) con respecto al botón principal, pero pueden funcionar como opción independiente en algunos casos. Estos botones también se crean a partir de dos colores: color de fondo y color del texto del botón secundario. Esta combinación también se debe crear de manera que se pueda leer fácilmente.

1. Color de fondo del botón secundario
2. Color del texto del botón secundario

Color del texto y de los botones terciarios

Los botones terciarios se utilizan para acciones adicionales en la pantalla. En cuanto a su creación, una vez más, se combinan el color de fondo y el color del texto de un modo que sea agradable a la vista. Se utilizan sobre todo en opciones desplegables y subcategorías (grupos de artículos).

1. Color de fondo del botón terciario
2. Color del texto del botón terciario

Radio de borde del botón

Se utiliza para redondear las esquinas de los botones.

Radio de borde de los botones principales y secundarios

• Se utiliza para el radio de borde en botones principales y secundarios.
• Valor predeterminado: 8 píxeles

Radio de borde del botón terciario

• Se aplica a los botones terciarios y de pastilla.
• Valor predeterminado: 16 píxeles