Button Group

Buttons 6

About

A row of related action buttons joined into one surface with hairline dividers, a sliding hover/focus highlight, and an optional trailing menu for overflow actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button Group to your project and fits it to your theme.

Code

How Button Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ButtonGroup } from "@/components/ui/button-group";
import { Archive, Check, CopyPlus, Link, Pin, Trash2 } from "lucide-react";
import { useState } from "react";

export default function ButtonGroupDemo() {
  const [copied, setCopied] = useState(false);

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-10">
      <ButtonGroup
        label="Document actions"
        items={[
          {
            id: "share",
            label: copied ? "Copied" : "Share",
            reserve: ["Share", "Copied"],
            icon: copied ? <Check /> : <Link />,
            onSelect: () => {
              setCopied(true);
              setTimeout(() => setCopied(false), 1800);
            },
          },
          { id: "duplicate", label: "Duplicate", icon: <CopyPlus /> },
          { id: "archive", label: "Archive", icon: <Archive /> },
        ]}
        menu={{
          label: "More actions",
          items: [
            { id: "pin", label: "Pin to sidebar", icon: <Pin /> },
            {
              id: "delete",
              label: "Delete",
              icon: <Trash2 />,
              destructive: true,
            },
          ],
        }}
      />
    </div>
  );
}