Button [Group]

Overview

Button Group is a container component that organizes related actions into a single cohesive unit. It handles horizontal and vertical layouts, up to 8 items, 3 active color styles, and 5 sizes, all customizable directly from the parent with no detaching required, in both Figma and React.

When should you use them?

Use a button group when several related actions belong together, such as a toolbar, a segmented control, or a set of view toggles. Grouping them into one unit signals that the actions are connected and keeps spacing, borders, and alignment consistent.

How should you use them?

• Group only actions that are genuinely related, like alignment options or view modes, not unrelated buttons.
• Choose horizontal for toolbars, vertical for sidebars and stacked menus.
• Use the active color style (Primary, Neutral, or Soft) to show which option is currently selected.
• Toggle middle items from the properties panel; keep the first and last items for correct border rendering.
• Switch to Icon Only mode for compact toolbars and dense action bars.
• Keep each item keyboard-focusable so the whole group stays accessible.