Button Group

🧭 When to Use a Button Group

Use a Button Group when:

• You want users to switch between views or filters quickly

• The options are mutually exclusive or belong to the same category (e.g. “Day / Week / Month”)

• You want to avoid dropdowns or radio buttons for common, repeated actions

Avoid Button Groups when actions have very different purposes or require confirmations—use standalone buttons in those cases.

🧩 Component Structure

A Button Group includes:

• A shared container with border-radius logic for edge buttons

• Button Items with connected spacing and consistent states

• Optional divider logic between segments (visually handled via borders or spacing tokens)

Each item inside the group is a button variant that supports labels, icons, or both.

🎨 Content Types

Button Group items support three content formats:

• Icon + Label – Combines a visual and text cue for maximum clarity (e.g. 🗓️ Week, 📅 Month)

• Label Only – Best for short, descriptive labels where icons aren’t needed

• Icon Only – Compact and ideal for toolbars or mobile UIs where space is limited

Content type is set via a layer property or variant in Figma, allowing quick swaps between styles.

🎯 Button States

Each item in the group can appear in one of the following states:

• Default – Neutral appearance, unselected

• Hover – Slight background or border color change to indicate interactivity

• Selected – Highlighted state showing the current active or chosen option

• Disabled – Dimmed and non-interactive; used when an option is unavailable

Only one button should be in a Selected state at a time (unless you're designing a multi-select version).

🧠 Behavior & Interaction

• Clicking a new button deselects the others by default

• Button Groups can support single or multi-select, depending on the UX goal

• Keyboard support includes arrow key navigation and Enter/Space for selection (if implemented)

If used in forms or toggles, ensure only one is selected at a time unless configured for multi-select filters.

♿ Accessibility Considerations

From a design perspective:

• Ensure selected and hover states are visually distinct (not just color-based)

• Use consistent padding and sizing so all buttons feel part of the same group

• Maintain at least 44x44px touch target per button

From a code perspective (if implemented):

• Use role="group" on the container

• Use aria-pressed for each button to indicate toggle state

• Provide aria-label or aria-labelledby for icon-only buttons

✅ Best Practices

• Keep labels short and consistent in length

• Use icons only when the visual clearly reinforces the action

• Avoid mixing destructive and primary actions in the same group

• Maintain consistent spacing between buttons and align edges cleanly