Button Group

Groups related buttons together with consistent styling.

Installation

Add the button group component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/button-group.json

Usage

tsx

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

Examples

With separator

ButtonGroupSeparator

import { ChevronRightIcon } from "lucide-react"

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

<ButtonGroup>
  <Button variant="outline">Save</Button>
  <ButtonGroupSeparator />
  <Button variant="outline" size="icon" aria-label="More">
    <ChevronRightIcon />
  </Button>
</ButtonGroup>

With text addon

ButtonGroupText

https://

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

<ButtonGroup>
  <ButtonGroupText>https://</ButtonGroupText>
  <Input placeholder="swiss-ui.dev" className="w-40" />
</ButtonGroup>