Button Group

Groups buttons and inputs together with smart border radius handling.

shadcn/ui docs →

Preview

Installation

terminal
$
Other package managers
bunx --bun shadcn@latest add https://trents.tech/r/button-group.json

Dependencies: @radix-ui/react-slot

Usage

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

<ButtonGroup>
  <Button>Save</Button>
  <ButtonGroupSeparator />
  <Button variant="neutral">Cancel</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button>Option A</Button>
  <Button variant="neutral">Option B</Button>
  <Button variant="neutral">Option C</Button>
</ButtonGroup>
0