Introduction

Button groups combine related buttons into a single unit. They support horizontal and vertical orientations, and can be combined into toolbars.

Installation

import { ButtonGroup, ButtonToolbar } from '@/components/ui/button-group';

Usage

<ButtonGroup>
<Button variant="outlined">Left</Button>
<Button variant="outlined">Middle</Button>
<Button variant="outlined">Right</Button>
</ButtonGroup>

Examples

Default

ButtonGroupDefault

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

export default function Component() {
  return (
    <ButtonGroup>
      <Button variant="outlined">Left</Button>
      <Button variant="outlined">Middle</Button>
      <Button variant="outlined">Right</Button>
    </ButtonGroup>
  );
}

Themes

ButtonGroupThemes

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

export default function Component() {
  return (
    <div className="flex flex-col gap-4">
      <ButtonGroup>
        <Button>Left</Button><Button>Middle</Button><Button>Right</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outlined">Left</Button><Button variant="outlined">Middle</Button><Button variant="outlined">Right</Button>
      </ButtonGroup>
    </div>
  );
}

Vertical

Use orientation="vertical" to stack buttons vertically.

ButtonGroupVertical

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

export default function Component() {
  return (
    <ButtonGroup orientation="vertical">
      <Button variant="outlined">Top</Button>
      <Button variant="outlined">Middle</Button>
      <Button variant="outlined">Bottom</Button>
    </ButtonGroup>
  );
}

Combine multiple button groups with ButtonToolbar.

ButtonGroupToolbar

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

export default function Component() {
  return (
    <ButtonToolbar>
      <ButtonGroup>
        <Button size="sm">1</Button><Button size="sm">2</Button><Button size="sm">3</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button size="sm" variant="outlined">4</Button><Button size="sm" variant="outlined">5</Button>
      </ButtonGroup>
    </ButtonToolbar>
  );
}

API Reference

ButtonGroup

Prop	Type	Default	Description
`orientation`	`horizontal \| vertical`	`horizontal`	Layout direction

ButtonToolbar

Wraps multiple ButtonGroup components with role="toolbar" and flex layout.

Button Group