# Button Group

> Joined button group with shared borders, horizontal or vertical, rounding only the outer corners.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/button-group
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/button-group.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/button-group-demo.tsx"
import { AlignCenter, AlignLeft, AlignRight, ChevronDown } from "lucide-react"

import { ButtonGroup, ButtonGroupItem } from "@/components/button-group"

export default function ButtonGroupDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 p-8">
      <ButtonGroup aria-label="Pagination">
        <ButtonGroupItem>Previous</ButtonGroupItem>
        <ButtonGroupItem>1</ButtonGroupItem>
        <ButtonGroupItem>2</ButtonGroupItem>
        <ButtonGroupItem>Next</ButtonGroupItem>
      </ButtonGroup>
      <ButtonGroup aria-label="Alignment">
        <ButtonGroupItem aria-label="Align left">
          <AlignLeft />
        </ButtonGroupItem>
        <ButtonGroupItem aria-label="Align center">
          <AlignCenter />
        </ButtonGroupItem>
        <ButtonGroupItem aria-label="Align right">
          <AlignRight />
        </ButtonGroupItem>
      </ButtonGroup>
      <ButtonGroup orientation="vertical" aria-label="Actions">
        <ButtonGroupItem>Archive</ButtonGroupItem>
        <ButtonGroupItem>Report</ButtonGroupItem>
        <ButtonGroupItem>
          More <ChevronDown />
        </ButtonGroupItem>
      </ButtonGroup>
    </div>
  )
}
```

## Source

```tsx title="components/button-group.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface ButtonGroupProps extends React.ComponentProps<"div"> {
  orientation?: "horizontal" | "vertical"
}

export function ButtonGroup({ orientation = "horizontal", className, ...props }: ButtonGroupProps) {
  return (
    <div
      role="group"
      className={cn(
        "inline-flex shadow-xs",
        orientation === "horizontal"
          ? "flex-row -space-x-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none"
          : "flex-col -space-y-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
        className
      )}
      {...props}
    />
  )
}

export function ButtonGroupItem({ className, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      className={cn(
        "relative inline-flex h-9 items-center justify-center gap-2 rounded-lg border border-input bg-background px-4 text-sm font-medium text-foreground",
        "transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
        className
      )}
      {...props}
    />
  )
}
```