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.
"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>
);
}