Docs › Components › Button Group

Shadcn Button Group

The shadcn/ui Button Group joins related buttons into a single connected control, styled with Tailwind CSS v4. It removes the gaps between buttons and rounds only the outer corners, ideal for segmented toolbars and paired actions. Button groups appear in toolbars across ShadcnStore app blocks.

Key features

• Visually joins buttons into one control.
• Optional separators and inline text.
• Works with any Button variant and size.
• Horizontal or vertical orientation.
• Composes with dropdowns for split-button patterns.

Installation

npx shadcn@latest add button-group

Usage

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

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Years</Button>
      <Button variant="outline">Months</Button>
      <Button variant="outline">Days</Button>
    </ButtonGroup>
  )
}

Accessibility

• Each button keeps its own accessible name; label icon-only buttons.
• Grouping is visual, so ensure the actions still read as separate controls.
• Keep related actions together and avoid mixing unrelated ones in one group.

When to use the Button Group

Use a Button Group for a small set of related actions that belong together visually: a segmented view switch, paired prev/next controls, or a split button. For selected state across options, use a Toggle Group. For a single menu, use a Dropdown Menu.

Used in these blocks

• Apps: segmented toolbars.
• Datatables: view and action controls.
• Widgets: grouped controls.

Related components

A Button Group joins Buttons; for selected state use a Toggle Group, and for overflow actions pair it with a Dropdown Menu.

FAQ

What is the shadcn button group used for?

The Button Group joins related buttons into a single connected control, such as a segmented toolbar or paired actions.

What is the difference between Button Group and Toggle Group?

Button Group visually joins independent action buttons. Toggle Group manages selected state across a set of two-state toggles.

How do I add a divider between buttons?

Place a ButtonGroupSeparator between buttons inside the group.

Can I make a split button?

Yes. Put a main Button and a Dropdown Menu trigger in the same group.