Button Group

Learn how to group multiple buttons together for related actions.

Basic Group

Mixed Styles

Outline Group

Usage

Basic Implementation

<ButtonGroup>
  <Button>Option 1</Button>
  <Button>Option 2</Button>
  <Button>Option 3</Button>
</ButtonGroup>

With Selection

function SelectableGroup() {
  const [selected, setSelected] = useState('option1');
 
  return (
    <ButtonGroup>
      <Button 
        variant={selected === 'option1' ? 'solid' : 'ghost'}
        onClick={() => setSelected('option1')}
      >
        Option 1
      </Button>
      <Button 
        variant={selected === 'option2' ? 'solid' : 'ghost'}
        onClick={() => setSelected('option2')}
      >
        Option 2
      </Button>
    </ButtonGroup>
  );
}

Props

ButtonGroup Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Button components
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Group orientation
`spacing`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'none'`	Space between buttons

Best Practices

Group Organization:
- Group related actions together
- Maintain logical order
- Consider frequency of use
- Keep groups focused
Visual Design:
- Use consistent styling
- Consider button hierarchy
- Maintain proper spacing
- Ensure clear boundaries
Accessibility:
- Use proper ARIA roles
- Maintain keyboard navigation
- Consider screen readers
- Provide clear labels
Responsive Design:
- Handle small screens
- Consider touch targets
- Allow wrapping when needed
- Maintain usability

Examples

With Icons

<ButtonGroup>
  <Button>
    <PrevIcon /> Previous
  </Button>
  <Button>
    Next <NextIcon />
  </Button>
</ButtonGroup>

Vertical Orientation

<ButtonGroup orientation="vertical">
  <Button>Top</Button>
  <Button>Middle</Button>
  <Button>Bottom</Button>
</ButtonGroup>

With Spacing

<ButtonGroup spacing="md">
  <Button>Spaced</Button>
  <Button>Buttons</Button>
  <Button>Group</Button>
</ButtonGroup>

Custom Styling

<ButtonGroup className="custom-group">
  <Button className="custom-button">
    Custom
  </Button>
  <Button className="custom-button">
    Styled
  </Button>
</ButtonGroup>

Button Group

On this page