🎯 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.
Premium
Incluido en versión gratuita