ButtonGroup

Group buttons together with merged borders. Includes ButtonGroupSeparator for visual dividers and ButtonGroupText for label sections.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/button-group.json

Copy from the nteract/elements registry.

Usage

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/registry/primitives/button-group"
import { Button } from "@/registry/primitives/button"

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Run</Button>
      <Button variant="outline">Stop</Button>
      <Button variant="outline">Restart</Button>
    </ButtonGroup>
  )
}

Examples

Basic

<ButtonGroup>
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>

With Separator

<ButtonGroup>
  <Button variant="outline"><Bold /></Button>
  <Button variant="outline"><Italic /></Button>
  <Button variant="outline"><Underline /></Button>
  <ButtonGroupSeparator />
  <Button variant="outline"><ChevronDown /></Button>
</ButtonGroup>

With Text

Kernel

<ButtonGroup>
  <ButtonGroupText>Kernel</ButtonGroupText>
  <Button variant="outline">Restart</Button>
  <Button variant="outline">Interrupt</Button>
</ButtonGroup>

Vertical Orientation

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

Props

ButtonGroup

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the button group
`className`	`string`	—	Additional CSS classes

ButtonGroupText

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto child element
`className`	`string`	—	Additional CSS classes

ButtonGroupSeparator

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	The orientation of the separator
`className`	`string`	—	Additional CSS classes

ButtonGroup

On this page