Button Group

A container that groups related buttons with shared borders and orientation.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/button-group.json

Usage

Use a button group to connect related actions into a single control strip.

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

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Copy</Button>
      <Button variant="outline">Paste</Button>
      <Button variant="outline">Cut</Button>
    </ButtonGroup>
  );
}

Set orientation="vertical" for a stacked group. Use ButtonGroupText for a label segment and ButtonGroupSeparator between sections.