Grupo de Botones
Ayudan a iniciar acciones que los usuarios necesitan.
El grupo de Botones proporciona a los usuarios organización del contenido y sus
acciones; la accesibilidad a la información; y la usabilidad de la interfaz de una
aplicación o sitio web para interactuar con las opciones y acciones disponibles.
Estos son los aspectos que influyen en cuándo y donde utilizarlos:
- Organización: Esto permite a los usuarios encontrar rápidamente las opciones que están buscando y entender cómo están relacionadas entre sí.
- Esfuerzo: Al agrupar botones relacionados en un mismo grupo, reduce el tiempo y el esfuerzo requeridos para completar tareas y mejora la accesibilidad de la interfaz.
- Conjunto: Cuando hay un conjunto de acciones o funcionalidades relacionadas que comparten un contexto común, se pueden agrupar en un solo grupo de botones.
- Jerarquía: Mediante la disposición y el diseño visual de los grupos de botones, es posible establecer una jerarquía y prioridad en las acciones o funcionalidades. Al destacar ciertos botones o ubicarlos en posiciones prominentes, se indica su importancia relativa y ayuda a los usuarios a enfocarse en las opciones clave.
- Claridad: Los grupos de botones brindan claridad y facilitan la comprensión de las opciones disponibles para los usuarios. Al agrupar botones relacionados bajo una misma categoría o etiqueta, se crea una asociación visual y conceptual que ayuda a los usuarios a identificar rápidamente las acciones relacionadas.
- Orden: Al agrupar los botones, se evita la dispersión visual y el desorden en la interfaz. Esto ayuda a mantener un diseño limpio y ordenado, lo que facilita la comprensión y la legibilidad de la interfaz para los usuarios.
- Flexibilidad: Los grupos de botones permiten una mayor flexibilidad y capacidad de expansión en la interfaz. Pueden alojar un conjunto inicial de opciones, pero también pueden adaptarse para incluir más botones o funcionalidades a medida que la aplicación o el sitio web crecen y se desarrollan.
Dos Botones extremos
HTML
<div class="botones-segmentados">
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
</div>
CSS
.botones-segmentados {
align-items: flex-start;
display: flex;
padding: 0px;
}
.botones-segmentados button:first-child {
border-radius: 10px 0px 0px 10px;
}
.botones-segmentados button:last-child {
border-radius: 0px 10px 10px 0px;
}
.botones-segmentados button {
align-items: center;
background-color: white;
border-radius: 0;
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: 40px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 7px 28px;
text-align: center;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.botones-segmentados button:hover {
background: #EBF2F9;
border: 2px solid #024588;
}
.botones-segmentados button.grupo-btn-active {
background: #D7E5F4;
border: 3px solid #024588;
}
JS
const elementos = document.querySelectorAll(".grupo-btn");
elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("grupo-btn-active");
});
elemento.classList.toggle("grupo-btn-active");
});
});
Tres botones
HTML
<div class="botones-segmentados">
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
</div>
CSS
.botones-segmentados {
align-items: flex-start;
display: flex;
padding: 0px;
}
.botones-segmentados button:first-child {
border-radius: 10px 0px 0px 10px;
}
.botones-segmentados button:last-child {
border-radius: 0px 10px 10px 0px;
}
.botones-segmentados button {
align-items: center;
background-color: white;
border-radius: 0;
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: 40px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 7px 28px;
text-align: center;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.botones-segmentados button:hover {
background: #EBF2F9;
border: 2px solid #024588;
}
.botones-segmentados button.grupo-btn-active {
background: #D7E5F4;
border: 3px solid #024588;
}
JS
const elementos = document.querySelectorAll(".grupo-btn");
elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("grupo-btn-active");
});
elemento.classList.toggle("grupo-btn-active");
});
});
Más de cuatro botones
HTML
<div class="botones-segmentados">
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
<button type="button" class="grupo-btn">Etiqueta</button>
</div>
CSS
.botones-segmentados {
align-items: flex-start;
display: flex;
padding: 0px;
}
.botones-segmentados button:first-child {
border-radius: 10px 0px 0px 10px;
}
.botones-segmentados button:last-child {
border-radius: 0px 10px 10px 0px;
}
.botones-segmentados button {
align-items: center;
background-color: white;
border-radius: 0;
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: 40px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 7px 28px;
text-align: center;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.botones-segmentados button:hover {
background: #EBF2F9;
border: 2px solid #024588;
}
.botones-segmentados button.grupo-btn-active {
background: #D7E5F4;
border: 3px solid #024588;
}
JS
const elementos = document.querySelectorAll(".grupo-btn");
elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("grupo-btn-active");
});
elemento.classList.toggle("grupo-btn-active");
});
});
Grupo de botones con icono
HTML
<div class="botones-segmentados">
<button type="button" class="grupo-btn">
<img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
</button>
<button type="button" class="grupo-btn">
<img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
</button>
<button type="button" class="grupo-btn">
<img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
</button>
</div>
CSS
.botones-segmentados {
align-items: flex-start;
display: flex;
padding: 0px;
}
.botones-segmentados button:first-child {
border-radius: 10px 0px 0px 10px;
}
.botones-segmentados button:last-child {
border-radius: 0px 10px 10px 0px;
}
.botones-segmentados button {
align-items: center;
background-color: white;
border-radius: 0;
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: 40px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 7px 28px;
text-align: center;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.botones-segmentados button:hover {
background: #EBF2F9;
border: 2px solid #024588;
}
.botones-segmentados button.grupo-btn-active {
background: #D7E5F4;
border: 3px solid #024588;
}
JS
const elementos = document.querySelectorAll(".grupo-btn");
elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("grupo-btn-active");
});
elemento.classList.toggle("grupo-btn-active");
});
});
Grupo de botones con texto más icono
HTML
<div class="botones-segmentados">
<button type="button" class="grupo-btn">
<img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
Etiqueta</button>
<button type="button" class="grupo-btn">
<img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
Etiqueta</button>
<button type="button" class="grupo-btn">
<img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
Etiqueta</button>
</div>
CSS
.botones-segmentados {
align-items: flex-start;
display: flex;
padding: 0px;
}
.botones-segmentados button:first-child {
border-radius: 10px 0px 0px 10px;
}
.botones-segmentados button:last-child {
border-radius: 0px 10px 10px 0px;
}
.botones-segmentados button {
align-items: center;
background-color: white;
border-radius: 0;
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: 40px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 7px 28px;
text-align: center;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.botones-segmentados button:hover {
background: #EBF2F9;
border: 2px solid #024588;
}
.botones-segmentados button.grupo-btn-active {
background: #D7E5F4;
border: 3px solid #024588;
}
JS
const elementos = document.querySelectorAll(".grupo-btn");
elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("grupo-btn-active");
});
elemento.classList.toggle("grupo-btn-active");
});
});
