Button Group

Ready

Group buttons together with shared styling and toggle functionality

Basic Button Group

Group related buttons together

Toggle Button Group

Single selection from a set of options

Text Alignment

Selected: center

View Mode

Multiple Selection

Allow selecting multiple options

Text Formatting

Selected: bold

Sizes

Different size variants

Small

Medium (default)

Large

Vertical Orientation

Stack buttons vertically

ButtonGroup

ToggleButtonGroup

Full Width

Buttons that fill available space

Features

Built-in functionality

ButtonGroup - Wrapper for any Button components
ToggleButtonGroup - Built-in selection state management
Multiple selection - Allow selecting multiple options
Three sizes - Small, medium, and large variants
Orientation - Horizontal or vertical layouts
Full width - Fill available container width
Accessible - ARIA roles for radio/checkbox groups

Usage

Basic implementation examples

import { ButtonGroup, ToggleButtonGroup } from '@/components/ui/button-group'
import { Button } from '@/components/ui/button'

// Basic ButtonGroup
<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

// Toggle selection (single)
<ToggleButtonGroup
  options={[
    { value: 'left', label: <AlignLeft /> },
    { value: 'center', label: <AlignCenter /> },
    { value: 'right', label: <AlignRight /> },
  ]}
  value={alignment}
  onChange={setAlignment}
/>

// Multiple selection
<ToggleButtonGroup
  options={[
    { value: 'bold', label: 'B' },
    { value: 'italic', label: 'I' },
  ]}
  value={formatting}
  onChange={setFormatting}
  multiple
/>

API Reference

ToggleButtonGroup component props

Prop	Type	Default	Description
options	{ value, label }[]	-	Available options (required)
value	string \| string[]	-	Selected value(s) (required)
onChange	(value) => void	-	Change handler (required)
multiple	boolean	false	Allow multiple selections
size	'sm' \| 'md' \| 'lg'	'md'	Size variant
orientation	'horizontal' \| 'vertical'	'horizontal'	Layout orientation
fullWidth	boolean	false	Fill container width
disabled	boolean	false	Disable all buttons