Expanding button group

When to use #

Use it for

Share and reaction rows where space is tight.
Each action briefly confirms when used.

Skip it when

Labels must always be visible; use a button group.

Installation #

terminal

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

Adds its 2 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 { Copy, Download, Share2 } from "lucide-react"
import { ExpandingButtonGroup } from "@/components/ui/expanding-button-group"

export function ShareRow() {
  return (
    <ExpandingButtonGroup
      label="Share actions"
      defaultExpanded="copy"
      items={[
        { id: "copy", label: "Copy link", icon: <Copy aria-hidden="true" />, doneLabel: "Copied" },
        { id: "share", label: "Share", icon: <Share2 aria-hidden="true" /> },
        { id: "save", label: "Download", icon: <Download aria-hidden="true" />, doneLabel: "Saved" },
      ]}
    />
  );
}

API reference #

ExpandingButtonGroup

component

PropTypeDefault

items *readonly ExpandingAction[]—

label *string—

defaultExpandedstring—

confirmDurationnumber1400

onAction((id: string) => void)—

classNamestring—

It exposes toolbar semantics, with aria-label, aria-disabled, aria-busy and aria-hidden kept in step with state.

KeyBehaviour

→Moves to the next item or value.

←Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

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.