Button group UI component for Figma — 36 variants

🎯 Component Overview

The Button Group component in Emvi UI enables the grouping of multiple buttons into a single visual and functional unit. Its main purpose is to organize related actions while maintaining consistency in spacing, alignment, and visual hierarchy.

This component is ideal for forms, toolbars, user settings, or any other context where multiple grouped actions are needed. It supports both uniform and mixed button types (primary, secondary, icon).

The system allows for horizontal or vertical orientation, compact groupings, and optional separators via icons or dividers.

🧩 Grouping Types and Behavior

Emvi UI offers several configurations for button groups, adapting to various design and interaction needs:

Classic Group (Inline): Buttons aligned horizontally with no visible spacing, sharing connected borders to simulate a unified unit.

Segmented Group: Each button maintains its own border with minimal visual spacing. Ideal for toggle-like individual options.

Vertical Group: Column-based variant, useful in side panels or mobile interfaces.

Mixed Buttons: Supports grouping different button types (e.g., primary + icon).

The system automatically handles border radius, z-index, and internal spacing to ensure visual and functional consistency. It also supports single or multiple selection logic based on the use case.

♿ States, Accessibility, and Integration

Button groups in Emvi UI inherit all interaction states defined in the base component, including hover, active, focus, disabled, and loading. These states remain consistent across individual buttons within the group.

From an accessibility perspective, each button maintains its individual role (role="button") and can be enhanced with attributes such as aria-pressed to represent selection in toggle-style groupings.

The group structure is compatible with Figma (as nested components with variants) and Tailwind CSS, using preconfigured utility classes like inline-flex, gap-x, divide-x, and more, ensuring quick and semantic implementation.

✅ Best Practices

To ensure effective and consistent implementation of the Button Group component in Emvi UI, the following best practices are recommended:

Use groups only when actions are clearly related.

Avoid overcrowding groups with too many buttons (limit to 3–5 items).

Maintain consistent styling within the group, unless intentional differentiation is needed.

Apply group variants (segmented, vertical) based on available space and usage context.

Include accessible descriptions or labels (aria-label) when button content is non-textual.

These guidelines enhance usability, reinforce visual hierarchy, and ease integration across layouts and devices.