Button Group

Buttons and fields joined into one control, like the + and − buttons under a list.

@cupertinoui/button-groupRegistry JSON

Font size

import { ChevronLeftIcon, ChevronRightIcon, MinusIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"

export default function ButtonGroupDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ButtonGroup aria-label="Add or remove">
        <Button variant="secondary" size="icon" aria-label="Add">
          <PlusIcon />
        </Button>
        <Button variant="secondary" size="icon" aria-label="Remove">
          <MinusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Navigate">
        <Button variant="secondary" size="icon" aria-label="Previous">
          <ChevronLeftIcon />
        </Button>
        <Button variant="secondary">Today</Button>
        <Button variant="secondary" size="icon" aria-label="Next">
          <ChevronRightIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <ButtonGroupText>Font size</ButtonGroupText>
        <Input defaultValue="13" className="w-14 rounded-none" aria-label="Font size" />
        <ButtonGroupText>pt</ButtonGroupText>
      </ButtonGroup>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/button-group

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<ButtonGroup>
  <Button variant="secondary" size="icon"><PlusIcon /></Button>
  <Button variant="secondary" size="icon"><MinusIcon /></Button>
</ButtonGroup>

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

ButtonGroup

Prop	Type	Description
`orientation`	`"horizontal" \| "vertical"` Default: `"horizontal"`	How the buttons are joined.
`className`	`string`	Extra classes, merged with the component's own.

ButtonGroupText / ButtonGroupSeparator

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.