Guía de estilos

Botones

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

Todos los botones de Gob.pe tienen la fuente Roboto 700, y el tamaño predeterminado de 18px.




Estructura


Tamaños

S
M
L
XL



Comportamientos


Para diferenciar los botones de los elemento no interactivos, es necesario que estos cambien de estado visualmente cuando los usuarios interactúan con ellos.
Habilitado
Deshabilitado
Hover
Focus



Versiones


Primario

Por cada página del servicio solo puede haber un botón primario. Este corresponde a la acción principal de la página. Si duplicaramos este botón, no podríamos dirigir al usuario a cumplir su objetivo, ya que este es el foco de la página. Adicionalmente, el botón primario puede tener un ícono del lado derecho.

Habilitado
Hover



Secundario

Los botones secundarios sirven para indicar al usuario distintas acciones dentro de la página, por lo que pueden aparecer juntos. Idealmente, cada botón secundario corresponde a la acción principal de una sección o módulo dentro de una página.

Habilitado
Hover


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.

Habilitado
Hover



Terciario

Para acciones de menor jerarquia utilizamos enlaces. El texto de los enlaces debe ser claro e indidcar al usuario la acción que se va a realizar. No debemos usar 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.

Habilitado
Hover





Botón de confirmación de envío

Este botón es utilizado para confirmación de envío en feedback y todo tipo de acción de envío de información concreta.




Botón para procesos con formularios

Estos botones son utilizados en los procesos de llenado de formularios, donde existen pasos a seguir.





Accesibilidad en los botones

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

14.59:1
7.18:1
7.06:1

6.29:1
7.18:1



Focus

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

4.57:1
9.29:1
4.49:1