Shadcn Button Group Components

Shadcn Button Group Component

The Shadcn Button Group joins related buttons, inputs and selects into one connected control. It removes the inner borders and the corner radius between its children so they read as a single unit, while every child keeps its own behavior. Pagination, split buttons, formatting toolbars and search bars with a submit button all rely on it.

Split buttons with a chevron menu, segmented Days, Months and Years switches, currency selects joined to amount inputs and quantity steppers show how far a single wrapper can go. Each shadcn button group here is a styled div built with shadcn/ui, React and Tailwind CSS, so it works in projects based on Radix UI or Base UI.

What is the Shadcn Button Group Component?

A button group is a layout component, not a stateful one. It renders a container with role="group" and an orientation prop that is horizontal by default or vertical. It styles its direct children with CSS selectors: buttons, inputs, input groups and select triggers get joined edges, the focused child is raised so its focus ring stays visible, and nested groups get a small gap between clusters.

Choose a button group when several independent actions belong together, like Previous and Next or Save with a menu of extra options. If the buttons represent an on or off choice, a Toggle is more accurate because it carries a pressed state. If the choice switches between views of content, use Tabs, and for application level menus use the Menubar.

Anatomy of the Shadcn Button Group

20 Shadcn Button Group Variants

Each button group variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic pairs and pagination: Previous and Next buttons, icon only arrows and a numbered pagination row with an active page and a disabled arrow.
• Segmented options: A Days, Months and Years switch and a bold, italic and underline toolbar made of joined outline buttons.
• Split buttons with a menu: A Save and Exit button with an ellipsis menu that includes a label submenu, a Star button with a count badge and a chevron menu, and a merge button that picks its strategy from a radio menu.
• Counters and icon toolbars: A download button joined to a download count, text alignment icons with their own labels and a vertical pair of plus and minus buttons.
• Search and input rows: A search input with a submit button, an email field with an Add action, an input group with a filter menu and a search field whose button shows a loading spinner.
• Select and input combos: A currency select joined to an amount input, a status select with a task title and an add button, and a team member picker with avatars and a Send button.
• Steppers and popovers: A quantity selector with plus and minus buttons and a Copilot button whose chevron opens a popover with a task textarea.

How to Install the Shadcn Button Group Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a button group variant by its name:

npx shadcn@latest add @shadcnuikit/button-group1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Button Group Component

Wrap related controls in ButtonGroup and give it an aria-label that names the group. The children keep their own variant and size.

import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"

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

export function Pager() {
  return (
    <ButtonGroup aria-label="Pagination">
      <Button variant="outline" size="icon" aria-label="Previous page">
        <ChevronLeftIcon />
      </Button>
      <Button variant="outline">Page 2 of 8</Button>
      <Button variant="outline" size="icon" aria-label="Next page">
        <ChevronRightIcon />
      </Button>
    </ButtonGroup>
  )
}

Why Use the Shadcn Button Group Component

• One visual unit: Joined borders and corners make related actions look and feel like a single control.
• Mixes any control: Buttons, inputs, input groups, select triggers and dropdown triggers can sit in the same group.
• Clear focus: The focused child is lifted above its neighbors, so the focus ring is never clipped by the next segment.
• Horizontal or vertical: One prop switches the layout, which is handy for side toolbars and media controls.
• No extra state: The group adds styling only, so every child keeps its events, props and accessibility.

Common Button Group Use Cases

• Pagination: Previous and Next arrows with numbered pages in between.
• Split buttons: A primary action with a dropdown of related actions, such as merge options.
• Editor toolbars: Bold, italic, underline and alignment controls.
• Search bars: A search field joined to a submit or filter button.
• Form rows: Currency and amount inputs, a title with a status select or a quantity stepper.
• Social actions: Star or download buttons joined to their counts, with extra actions such as Fork in a menu.

Customizing the Shadcn Button Group

Because the group styles its children through selectors instead of wrapping them, you keep full control over each child. Pass a className to the group to change the gap or width, and nest groups to separate clusters: a group that contains other groups adds a gap between them automatically. Colors and radius come from your theme variables, and you can build a matching theme with the free Theme Generator.

For example, this adds a unit label and a separator between two filled buttons:

<ButtonGroup>
  <ButtonGroupText>USD</ButtonGroupText>
  <Input placeholder="0.00" />
</ButtonGroup>

<ButtonGroup>
  <Button>Deploy</Button>
  <ButtonGroupSeparator />
  <Button size="icon" aria-label="More deploy options">
    <ChevronDownIcon />
  </Button>
</ButtonGroup>

Button Group Accessibility and Keyboard Support

ButtonGroup renders with role="group", which tells assistive technology that the controls are related. Add an aria-label such as "Text formatting" or "Media controls" so the group is announced with a clear name.

Every child stays a native, focusable element, so there is no custom keyboard model to learn. Icon only buttons need their own aria-label, as the alignment example on this page shows.

Button Group Best Practices

• Group only actions that are related; unrelated buttons in one group confuse users.
• Keep the same variant and size for every child so the joined edges line up.
• Limit a group to a handful of segments, and move extra actions into a dropdown.
• Give the group and every icon only button an aria-label.
• Use a Toggle for pressed states instead of styling a button in a group as active.
• Wrap form rows in a Field so the group gets a visible label and description.

Components Related to Button Group

Shadcn Button Group FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.