Button Group

A layout component that merges the borders and border-radii of adjacent children so they appear as a unified control. Supports both horizontal and vertical orientations.

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

export default function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <Button variant="outline">Center</Button>
      <Button variant="outline">Right</Button>
    </ButtonGroup>
  )
}

Anatomy

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

<ButtonGroup>
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</ButtonGroup>

Examples

Horizontal group

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

Vertical group

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

With separator

Use ButtonGroupSeparator to add a visual divider between items.

<ButtonGroup>
  <Button variant="outline">Copy</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Paste</Button>
</ButtonGroup>

With text label

Use ButtonGroupText to embed a non-interactive label inside the group.

<ButtonGroup>
  <ButtonGroupText>https://</ButtonGroupText>
  <input className="flex-1 border px-2 text-sm" placeholder="example.com" />
</ButtonGroup>

API Reference

ButtonGroup

The root container. Merges border-radii and borders of adjacent data-slot children.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The layout direction of the group.
`className`	`string`	—
`children`	`ReactNode`	—

ButtonGroupText

A non-interactive text label rendered inside the group. Uses Base UI's useRender hook so the element can be swapped via the render prop.

Prop	Type	Default
`render`	`React.ReactElement`	—
`className`	`string`	—
`children`	`ReactNode`	—

ButtonGroupSeparator

A re-export of Separator styled for use inside a button group.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	The separator direction.
`className`	`string`	—