Button group

Free

A toolbar of related tools in one raised shell; toggled tools sink into it.

Installs components/ui/button-group.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/button-group.json

Ship notes for v2.14: faster cold starts in eu-central-1.

When to use #

Use it for

Formatting and view tools that belong together, such as Bold, Italic and Underline.
Toolbars where the buttons share a size and emphasis, with aria-pressed for toggles.

Skip it when

The buttons are unrelated; give each its own spacing instead.
Only one choice can be active; use a segmented control.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/button-group.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Bold, Italic, Link2, Underline } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

export function DraftActions() {
  const [marks, setMarks] = useState({ bold: true, italic: false, underline: false });
  const toggle = (key: keyof typeof marks) => setMarks((current) => ({ ...current, [key]: !current[key] }));
  return (
    <div className="grid justify-items-center gap-4">
      <ButtonGroup aria-label="Formatting">
        <Button variant="secondary" size="icon" aria-label="Bold" aria-pressed={marks.bold} onClick={() => toggle("bold")}><Bold aria-hidden="true" /></Button>
        <Button variant="secondary" size="icon" aria-label="Italic" aria-pressed={marks.italic} onClick={() => toggle("italic")}><Italic aria-hidden="true" /></Button>
        <Button variant="secondary" size="icon" aria-label="Underline" aria-pressed={marks.underline} onClick={() => toggle("underline")}><Underline aria-hidden="true" /></Button>
        <Button variant="secondary" size="icon" aria-label="Insert link"><Link2 aria-hidden="true" /></Button>
      </ButtonGroup>
      <p
        className="max-w-md rounded-[10px] bg-background px-4 py-3 text-sm shadow-[inset_0_0_0_1px_var(--border-strong)]"
        style={{ fontWeight: marks.bold ? 600 : 400, fontStyle: marks.italic ? "italic" : "normal", textDecoration: marks.underline ? "underline" : "none" }}
      >
        Ship notes for v2.14: faster cold starts in eu-central-1.
      </p>
    </div>
  );
}

API reference #

ButtonGroup

component

No props of its own; it accepts the native props of its root element.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.