Button Group

A high-quality, styled React button group component for grouping related actions.

The ButtonGroup component groups related action buttons together into a single connected visual layout.

Usage

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

export function ExampleButtonGroup() {
  return (
    <ButtonGroup variant="outline">
      <ButtonGroupItem>Years</ButtonGroupItem>
      <ButtonGroupItem>Months</ButtonGroupItem>
      <ButtonGroupItem>Days</ButtonGroupItem>
    </ButtonGroup>
  );
}

Preview

Orientation

Use the orientation="vertical" prop to stack buttons vertically:

<ButtonGroup orientation="vertical" variant="outline">
  <ButtonGroupItem>Top</ButtonGroupItem>
  <ButtonGroupItem>Middle</ButtonGroupItem>
  <ButtonGroupItem>Bottom</ButtonGroupItem>
</ButtonGroup>

Custom Styling

Apply custom group borders, shadows, or background rings via className:

<ButtonGroup variant="outline" className="shadow-md ring-1 ring-indigo-500/20 rounded-xl overflow-hidden">
  <ButtonGroupItem className="hover:bg-indigo-500/10">Daily</ButtonGroupItem>
  <ButtonGroupItem className="hover:bg-indigo-500/10">Weekly</ButtonGroupItem>
  <ButtonGroupItem className="hover:bg-indigo-500/10">Monthly</ButtonGroupItem>
</ButtonGroup>

Styling & Class Names

Target internal button group CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.button-group`	Root container	Connected inline flex container layout.
`.button-group--horizontal`	Horizontal layout	Seamless horizontal border radius clipping.
`.button-group--vertical`	Vertical layout	Seamless vertical border radius clipping.

API Reference

ButtonGroup Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction of the button group.
`size`	`'sm' \| 'md' \| 'lg'`	`undefined`	Shared size applied to all child button items.
`variant`	`'primary' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost'`	`undefined`	Shared variant applied to all child button items.