Expandable Action Bar

Buttons 92

About

A compact row of icon actions that expands into labeled controls on hover, focus, or tap, with a shared layout highlight and touch-friendly two-tap behavior.

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

Code

How Expandable Action Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { ExpandableActionBar } from "@/components/ui/expandable-action-bar";
import { Bookmark, Copy, Link2, Pencil, Share2, Trash2 } from "lucide-react";

const ITEMS = [
  {
    id: "edit",
    label: "Edit",
    icon: <Pencil className="size-4" />,
    shortcut: "E",
  },
  {
    id: "copy",
    label: "Duplicate",
    icon: <Copy className="size-4" />,
    shortcut: "Cmd+D",
  },
  { id: "link", label: "Copy link", icon: <Link2 className="size-4" /> },
  { id: "share", label: "Share", icon: <Share2 className="size-4" /> },
  {
    id: "save",
    label: "Save",
    icon: <Bookmark className="size-4" />,
    badge: 3,
  },
  { id: "delete", label: "Delete", icon: <Trash2 className="size-4" /> },
];

export default function ExpandableActionBarDemo() {
  const [last, setLast] = React.useState<string | null>(null);

  return (
    <div className="flex w-full flex-col items-center gap-5 py-10">
      <ExpandableActionBar
        items={ITEMS}
        onAction={(item) => setLast(String(item.label))}
      />
      <p className="text-sm text-neutral-500 dark:text-neutral-400">
        {last
          ? "Last action: " + last
          : "Hover or focus the bar - the icons expand into labeled controls."}
      </p>
    </div>
  );
}