Dynamic Button

An animated button that smoothly resizes its width to fit new content and crossfades its label and icon whenever the action or state changes. Built with motion/react, it uses a spring width transition, a coordinated vertical fade for content swaps, and an active-press scale. Supports primary and secondary variants, an optional icon, content or full width, and respects reduced-motion preferences.

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

"use client";

import { CommandIcon } from "@phosphor-icons/react";
import { DynamicButton } from "@/components/ui/dynamic-button";

export default function OpenCommandPaletteSecondary() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
      <DynamicButton variant="secondary" icon={<CommandIcon aria-hidden="true" size={15} weight="bold" />}>
        Open command palette
      </DynamicButton>
    </div>
  );
}