Button-group

# Button group

Un Grupo de botones (*Button group*) permite a las personas usuarias seleccionar una única opción de un conjunto interrelacionado o ejecutar acciones hermanas que afecten a la misma zona de la interfaz, visualizándose como una estructura compacta y segmentada.

Cuándo usarlo

- Para alternar la vista de un listado de información (ej. Vista Mapa vs. Vista Lista). - Como control de segmentación que filtre el contenido actual. - Cuando hay 2 o más botones (hasta un límite razonable como 5) que conforman un mismo selector visual único.

Cuándo no usarlo

- Para presentar los botones de confirmación/cancelación de un formulario general. (En ese caso, usar botones separados con el espaciado y alineación estándar). - Si el número de opciones es muy grande e impredecible (usar un selector Select estándar). - Para navegación global jerárquica (usar Pestañas o Side Navigation).

Semántica Base

El componente se implementa base con la semántica nativa interactiva: - Las acciones individuales son <button type="button">. - El contenedor es <div role="group"> y dispone de aria-label para explicar a los lectores de pantalla el propósito conjunto de los botones ("Selector de visualización", "Modo", etc.). - La opción activa o seleccionada se rige mediante el atributo aria-pressed="true".

*Nota sobre interacciones:* Por defecto este componente proporciona la capa estructural y de estilos (HTML/CSS). Si los botones deben comportarse como un *Radio group* exclusivo (donde seleccionar uno desactiva los otros), dicho comportamiento lógico requerirá inyección de JavaScript nativo en el producto final para conmutar el atributo aria-pressed.

Trazado y Lógica de Extremos Redondeados

El diseño estipula que el grupo mantenga los bordes exteriores redondeados pero los segmentos intermedios queden planos. - Esto se logra de forma inteligente y mantenible vía CSS puro mediante :first-child y :last-child. - Para evitar "bordes dobles" internos que sumarían 2px de contorno entre dos botones contiguos, el sistema aplica un margen negativo (margin-left: -1px;) en los hijos que se auto-solapa limpiamente escalando hacia N botones sin excepciones.

Tamaños Soportados

La visualización puede ajustarse con el modificador .button-group--sm sobre el contenedor principal, lo cual afectará automáticamente al relleno, altura y topografía de todos los botones descendientes, conservando la lógica visual y de foco sin romper las reglas de segmentación del grupo. - Default: Altura min de 53px y tipografía 18px. - SM: Altura min de 35px y tipografía 16px.

Estados Visuales

- Default: Fondo blanco, borde y tipografía oscuros. - Hover: Efecto transicional sin alterar la solidez base de bordes y fondo. - Focus: Eleva el z-index localmente y aplica un doble contorno (halo de accesibilidad blanco/azul claro) superponiéndose incluso a los botones vecinos, además de un sutil fondo de color azul claro. - Selected: Toma el color de fondo primario sólido (#d82b0f), texto en color blanco e incrementa el grosor tipográfico (font-weight: 700) permitiendo una distinción que no solo recae en el contraste de color, favoreciendo la accesibilidad universal.

<div class="button-group" role="group" aria-label="Selector de opciones">
  <button type="button" class="button-group__button" aria-pressed="true">Opción A</button>
  <button type="button" class="button-group__button">Opción B</button>
</div>