build69
Sign inGet API key
build69  /  Components  /  Buttons & Actions  /  ButtonGroup

ButtonGroup

v1.0.5Updated 20 Jul 2026

Segmented control or pill group for clustering related actions and single-select choices. Horizontal or vertical orientation; child borders auto-merge.

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedbuttongroupsegmentedtoggle+2

The default, out-of-the-box ButtonGroup.

Recommended for+14
  • ✓View switcher (list / grid)
  • ✓Sort direction toggle
  • ✓Toolbar action clusters
Tags+6
buttongroupsegmentedtogglepilldefault
Features+4
  • Auto-merged borders between children
  • Horizontal / vertical orientation
  • Composes ButtonGroupText + ButtonGroupSeparator
  • Works with Buttons, Selects, Inputs
Not recommended for−2
  • ✕Mutually-exclusive choices needing keyboard nav (use RadioGroup)
  • ✕Single primary CTA (use Button)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ButtonGroup" })

Usage

import { ButtonGroup } from '@/components/primitives/button-group';
import { Button } from '@/components/primitives/button';

<ButtonGroup>
  <Button tone="neutral" emphasis="outline">Day</Button>
  <Button tone="neutral" emphasis="outline">Week</Button>
  <Button tone="neutral" emphasis="outline">Month</Button>
</ButtonGroup>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
orientation

Layout direction

'horizontal' | 'vertical'—

Related

Platform docsAll componentsSource files