Button Group

Groups related buttons together with shared borders.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/button-group.json

Usage

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

<ButtonGroup>
  <Button aria-label="Bold" size="icon" variant="outline">
    <BoldIcon />
  </Button>
  <Button aria-label="Italic" size="icon" variant="outline">
    <ItalicIcon />
  </Button>
  <Button aria-label="Underline" size="icon" variant="outline">
    <UnderlineIcon />
  </Button>
</ButtonGroup>

Orientation

Set the orientation prop to stack the group vertically.

Size

Control the size of buttons using the size prop on individual buttons.

Split

Use a separator to split a primary action from a menu.

Input

Wrap an Input component with buttons.

Text

Use ButtonGroupText to display text within a group; pass render to swap in a custom element like a label.

https://