Grupo de botones

🎯 Visión General del Componente

El componente Button Group en Emvi UI permite agrupar múltiples botones en una sola unidad visual y funcional. Su principal objetivo es facilitar la organización de acciones relacionadas, manteniendo coherencia en espaciado, alineación y jerarquía visual.

Este componente puede utilizarse en formularios, barras de herramientas, configuraciones de usuario o cualquier otro contexto donde se requieran acciones múltiples agrupadas. Admite tanto botones de tipo uniforme como mixto (primario, secundario, ícono).

El sistema permite orientación horizontal o vertical, agrupaciones compactas y separación opcional por íconos o divisores.

🧩 Tipos de Agrupación y Comportamiento

Emvi UI ofrece distintas configuraciones para los grupos de botones, adaptándose a diversas necesidades de diseño e interacción:

Grupo Clásico (Inline): Botones alineados horizontalmente, sin separación visible, con bordes conectados para simular una única unidad.

Grupo Segmentado: Cada botón mantiene su propio borde, con separación visual mínima. Ideal para opciones individuales de tipo toggle.

Grupo Vertical: Variante en columna, útil en paneles laterales o móviles.

Botones Combinados: Soporte para agrupar botones de diferentes tipos (por ejemplo, primario + ícono).

El sistema gestiona automáticamente los radios de borde, el z-index y el espaciado interno para mantener la consistencia visual y funcional. También admite selección múltiple o exclusiva, según la lógica del caso de uso.

♿ Estados, Accesibilidad e Integración

Los grupos de botones en Emvi UI heredan todos los estados interactivos definidos en el componente base, incluyendo hover, active, focus, disabled y loading. Estos estados son consistentes entre botones individuales dentro del grupo.

Desde el punto de vista de accesibilidad, cada botón dentro del grupo conserva su rol individual (role="button") y puede ser enriquecido con atributos como aria-pressed para representar selección en agrupaciones tipo toggle.

La estructura del grupo es compatible con Figma (como componentes anidados con variantes) y Tailwind CSS, utilizando clases utilitarias preconfiguradas como inline-flex, gap-x, divide-x, entre otras, que aseguran una implementación rápida y semántica.

✅ Buenas Prácticas de Uso

Para garantizar una implementación eficaz y coherente del componente Button Group en Emvi UI, se recomiendan las siguientes prácticas:

Utilizar grupos únicamente cuando las acciones estén claramente relacionadas.

Evitar sobrecargar grupos con demasiados botones (máximo 3–5 elementos).

Mantener uniformidad de estilo dentro del grupo, salvo en casos específicos de diferenciación intencional.

Aplicar variantes de grupo (segmentado, vertical) según el espacio disponible y contexto de uso.

Incluir descripciones o etiquetas accesibles (aria-label) cuando el contenido del botón no sea textual.

Estas recomendaciones mejoran la usabilidad, fortalecen la jerarquía visual y facilitan la integración en diferentes layouts y dispositivos.