Guía de estilos

Botones

Dentro de Gob.pe los botones cumplen una función importante: ayudan y facilitan al usuario a realizar acciones dentro de la página.

Todos los botones usan la fuente Roboto 700 y el tamaño predeterminado de 18px.

Estructura

Tamaños

Comportamientos

Para diferenciar los botones de los elementos no interactivos es necesario que estos cambien de estado visualmente cuando los usuarios interactúan con ellos.

Versiones

Primario

Solo puede haber un botón primario en cada página del servicio y se le puede identificar con un ícono del lado derecho. Este corresponde a la acción principal de la página. Si duplicamos este botón, el usuario tendría que elegir entre varias opciones lo que generaría confusión sobre cuál es la acción principal.

Secundario

Los botones secundarios sirven para indicar al usuario distintas acciones dentro de la página, por lo que pueden aparecer juntos. Idealmente, cada uno corresponde a la acción principal de una sección o módulo dentro de una página más grande. Esta puede ser una página principal, interna o un formulario.

Excepción de comportamiento: cuando el ancho de espacio entre columnas es reducido y la cantidad de texto del botón es extenso se coloca el nombre a dos líneas y a un tamaño de 16 px.

Terciario

Para acciones de menor jerarquía utilizamos enlaces. Su texto debe ser claro e indicar al usuario la acción que se va a realizar. No usemos enlaces con el texto "clic aquí".

Alternativos

Estos botones son utilizados con el objetivo de direccionar a páginas que no estén dentro del servidor de la plataforma Gob.pe.

Botón de confirmación de envío

Se emplea para la confirmación de envío en feedback y todo tipo de acción de envío de información concreta.

Accesibilidad en los botones

El contraste en los botones debe seguir los requerimientos de accesibilidad establecidos.

Focus

Para facilitar el reconocimiento del elemento que está enfocado, lo enmarcamos en color amarillo que tiene suficiente contraste con el color usado en los botones.