Botones Comunes

Ayudan a iniciar acciones que los usuarios necesitan.

Los botones son componentes interactivos que desencadenan acciones. Las etiquetas de los botones (“Envía tus datos”) expresan qué acción ocurrirá cuando el usuario interactúe con él.

Los botones son dinámicos en sus componentes, pueden incluir un ícono, texto o ambos. Además ese contenido cambia según su contexto y la acción que indica. Estos componentes influyen en el ancho del botón, pero no así en su alto (50px, fixed) qué es fijo.

Un botón se debe utilizar para:

Dar énfasis de acciones
Un énfasis por página
En módulos
Para la importancia de la acción

Énfasis de los botones

Los botones tienen énfasis según la relevancia de la interacción en la página. Por lo tanto es recomendable utilizar esos énfasis en equilibrio, evitando la saturación de acciones de alto énfasis o muchas acciones similares en un módulo.

Para el sistema de botones de AIEP existen 5 énfasis diferentes:

1. Botón Primario
2. Botón Secundario
3. Botón Terciario

4. Botón Primario
5. Botón Secundario
6. Botón Terciario

Estados de los botones

Cada botón tiene estados de interacción que permiten a los usuario retroalimentarse sobre las interacciones y zonas sensibles donde puede presionar, arrastrar o cambiar.

Para todos los botones existen como base al menos 4 estados de interacción:

1. Habilitado
2. Sobre

3. Presionado
4. Desactivado

Sistema de botones

El sistema de botones creado para AIEP tiene como objetivo jerarquizar las acciones en relación a las importancias y objetivos de cada sección o página.

Para todos los botones existen como base al menos 4 estados de interacción:

Primario sin ícono
Primario con ícono
Secundario sin ícono
Secundario con ícono
Terciario sin icono
Terciario con icono
Botón de texto sin ícono
Botón de texto con ícono
Botón de ícono

De izquierda a derecha los distintos cambios de estado según la interacción:

Habilitado
Sobre
Presionado
Deshabilitado

Botón Primario o CTA sin ícono

Este botón se utiliza para una acción relevante que el usuario necesita realizar. Es también conocido como CTA (Call to Action), y como dice su nombre, corresponde a la acción principal de la página, es decir, la acción más relevante que el usuario necesitaría realizar en la pagina o sección que se encuentra.

HTML

<button class="primario">
Etiqueta
</button>

<button class="disabled">
Etiqueta
</button>

CSS

button.primario {
align-items: center;
background-color:#B40000;
border-radius: 10px;
border: 3px solid transparent;
color: #FFFFFF;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
height: 50px;
line-height: 20px;
padding: 15px 28px;
text-align: center;
}

button.primario:hover {
background-color: #E33535;
}

button.primario:active {
background-color: #E33535;
border: 3px solid #B40000;
}

button.primario:disabled {
background: #B6AFAF;
border: unset;
}

JS

Botón Primario o CTA con ícono

Este botón cumple la misma función que el anterior, es un CTA con ícono para reforzar visualmente la acción más relevante de la pagina o sección. Es importante señalar que un botón CTA ya sea con icono o sin él, puede utilizarse aproximadamente dos veces máximo dentro de una sola sección o página, y debe desencadenar la misma acción en esos dos casos.

HTML

<button class="primario">
Etiqueta
<img src="iconos/enviar_lineal_white.svg" alt="" width="32px" height="32px"> </button>

CSS

JS

Botón Secundario sin ícono

Un botón secundario suele tener una función menos prominente que el botón primario. Puede representar acciones menos frecuentes, como "Cancelar" o "Cerrar". También el botón secundario puede ser utilizado para llevar al usuario a otras paginas o secciones, o desencadenar acciones contextuales.

HTML

<button class="secundario">
Etiqueta
</button>

CSS

button.secundario {
align-items: center;
background-color: #D7E5F4;
border-radius: 10px;
border: 3px solid transparent;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
height: 50px;
justify-content: center;
line-height: 20px;
mix-blend-mode: normal;
padding: 15px 28px;
text-align: center;
}

button.secundario:hover {
background-color: #BFD6ED;
}

button.secundario:active {
background-color: #BFD6ED;
border: 3px solid #024588;
}

JS

Botón Secundario con ícono

Puede incluirse un ícono al final de la etiqueta del botón para reforzar la acción o complementarla, por ejemplo un ícono que indica que a presionar el botón se abrirá otra página aparte, o el ícono para descargar un archivo.

HTML

<button class="secundario">
Etiqueta
<img src="iconos/flecha-derecha-border.svg" alt="" width="32px" height="32px">
</button>

CSS

JS

Botón Terciario sin ícono

Este tipo de botones conocido tambien como "Botón Fantasma", "Botón sin Relleno” o “Botón Transparente”, se puede utilizar dentro de una pagina con mayor frecuencia, ya que su estilo lineal se integra sutilmente entre la interfaz.

HTML

<button class="terciario">
Etiqueta
</button>

CSS

button.terciario {
align-items: center;
background-color: unset;
border-radius: 10px;
border: 1px solid #024588;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
height: 50px;
justify-content: center;
line-height: 20px;
mix-blend-mode: normal;
padding: 15px 28px;
text-align: center;
}

button.terciario:hover {
border: 2px solid #024588;
}

button.terciario:active {
border: 3px solid #024588;
}

JS

Botón Terciario con ícono

Este botón tambien puede incluir un ícono al final de la etiqueta para reforzar o predecir la acción por el usuario.

HTML

<button class="terciario">
Etiqueta
<img src="iconos/seguridad_lineal.svg" alt="" width="32px" height="32px">
</button>

CSS

JS

Botón de Texto sin ícono

Esta es una alternativa al botón terciario, ya que su presencia es mucho mas sutil aún. Generalmente este tipo de botón parecido al botón de enlace, funciona en listas verticales, para incluirse en índices.

HTML

<button class="texto">
Etiqueta
</button>

CSS

button.texto {
align-items: center;
background-color: #FFFFFF;
border-radius: 10px;
border: 3px solid transparent;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
height: 50px;
justify-content: center;
line-height: 20px;
mix-blend-mode: normal;
padding: 15px 28px;
text-align: center;
}

button.texto:hover {
background-color: #EBF2F9;
}

button.texto:active {
background-color: #EBF2F9;
border: 3px solid #024588;
}

JS

Botón de Texto con ícono

Se puede sumar un ícono después de la etiqueta del botón para complementar o anticipar la acción que este puede desencadenar.

HTML

<button class="texto">
Etiqueta
<img src="iconos/seguridad_lineal.svg" alt="" width="32px" height="32px">
</button>

CSS

JS

Botón de Enlace

Aunque no es técnicamente un botón, se utiliza para representar enlaces a otras páginas o recursos. Puede ser un enlace a una URL externa o interna dentro del sistema. Este botón se utiliza generalmente entre párrafos o frase de texto sin enlaces. Esto permite conectar con otras paginas o secciones sin perder la lectura completa.

HTML

<button class="enlace">
Etiqueta
</button>

CSS

button.enlace {
align-items: center;
background-color: transparent;
border: unset;
color: #1669BC;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
height: 50px;
line-height: 20px;
mix-blend-mode: normal;
text-align: center;
text-decoration: underline;
}

button.enlace:hover {
color: #3D8DDD;
}

button.enlace:active {
color: #89B8E7;
}