ButtonGroup

Organize related buttons into a group with consistent styling and spacing

Usage

Group buttons together to create a cohesive set of related actions.

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

export default function ButtonGroupExample() {
  return (
    <ButtonGroup>
      <Button>Merge</Button>
      <Button> Fix</Button>
    </ButtonGroup>
  );
}

Sizes

Set the size on the group to scale all contained buttons consistently.

Variants

Use the variant prop to set the visual style for all buttons in the group.

Palettes

Use the colorPalette prop to apply a consistent color scheme to all buttons in the group.

Orientation

Use the orientation prop to arrange buttons horizontally or vertically within the group.

Full width

Use the fullWidth prop to make buttons expand to fill the available space, distributing width evenly across the group.

API Reference

ButtonGroupRoot

The root component for the button group.

Prop	Type	Default
size	`xs` \| `sm` \| `md` \| `lg` \| `xl`	`md`
variant	`primary` \| `secondary` \| `tertiary` \| `surface` \| `ghost` \| `plain`	`primary`
iconOnly	`boolean`	`false`
fullWidth	`boolean`	`false`
attached	`boolean`	`false`
orientation	`horizontal \| vertical`	`horizontal`
asChild	`boolean`	`undefined`

ButtonGroupItem

The individual button component within the group.

Prop	Type	Default
variant	`Variant`	`primary`
size	`Size`	`md`
iconOnly	`boolean`	`false`
fullWidth	`boolean`	`false`
asChild	`boolean`	`undefined`