A compact row of icon action buttons where the one you point at or focus grows to reveal its label while neighbours slide aside, and an action can confirm in place with a check and a past-tense word.
import ExpandingButtonGroup from "@/components/ui/expanding-button-group";
import { Archive, Clock3, Forward, Reply, Trash2 } from "lucide-react";
export default function ExpandingButtonGroupDemo() {
const items = [
{ id: "reply", label: "Reply", icon: <Reply />, onSelect: () => {} },
{ id: "forward", label: "Forward", icon: <Forward />, onSelect: () => {} },
{
id: "archive",
label: "Archive",
doneLabel: "Archived",
icon: <Archive />,
onSelect: () => true,
},
{
id: "snooze",
label: "Snooze",
doneLabel: "Snoozed",
icon: <Clock3 />,
onSelect: () => true,
},
{
id: "delete",
label: "Delete",
doneLabel: "Deleted",
tone: "danger" as const,
icon: <Trash2 />,
onSelect: () => true,
},
];
return (
<div className="flex min-h-[220px] w-full items-center justify-center bg-[var(--background)] p-10">
<ExpandingButtonGroup
label="Message actions"
defaultExpanded="reply"
items={items}
/>
</div>
);
}