Expandable Button

A button that smoothly transitions between collapsed and expanded states using spring animations. Shows only an icon when collapsed and reveals text alongside the icon when expanded, perfect for responsive layouts and space-saving interfaces.

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

import { ExpandableButton } from "@/components/ui/expandable-button";
import { Inbox } from "lucide-react"


export default function DemoOne() {
  return  <div className="w-full px-10 flex items-center justify-center">
      <ExpandableButton icon={<Inbox className="w-5 h-5" />}>
        Inbox
      </ExpandableButton>
    </div>
}