# Button Group

A horizontal or vertical group of buttons with shared edges, plus separator and text primitives for toolbar-style and segmented layouts.

- Category: Buttons & Badges
- License: MIT
- Page: https://www.saasuji.com/components/button-group
- Install: npx shadcn@latest add https://www.saasuji.com/r/button-group.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| orientation | `"horizontal" | "vertical"` | `"horizontal" (ButtonGroup) / "vertical" (ButtonGroupSeparator)` | Layout direction. ButtonGroup defaults to horizontal and removes inner rounding; ButtonGroupSeparator defaults to vertical, drawing a vertical divider inside a horizontal group. |
| className | `string` | — | Additional classes merged onto ButtonGroup, ButtonGroupSeparator, or ButtonGroupText. |
| children | `React.ReactNode` | — | Buttons, separators, and text nodes inside the group. |

## Source

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const buttonGroupVariants = cva(
  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative",
  {
    variants: {
      orientation: {
        horizontal:
          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
        vertical:
          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
      },
    },
    defaultVariants: {
      orientation: "horizontal",
    },
  }
)

function ButtonGroup({
  className,
  orientation = "horizontal",
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

const buttonGroupSeparatorVariants = cva("relative self-stretch bg-border", {
  variants: {
    orientation: {
      vertical: "w-px",
      horizontal: "h-px w-auto self-center",
    },
  },
  defaultVariants: {
    orientation: "vertical",
  },
})

function ButtonGroupSeparator({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupSeparatorVariants>) {
  return (
    <div
      data-slot="button-group-separator"
      data-orientation={orientation}
      className={cn(buttonGroupSeparatorVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="button-group-text"
      className={cn(
        "flex items-center gap-1.5 px-3 text-sm font-medium text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}

export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }

```