Dynamic Button

Buttons 4

About

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.

Code

How Dynamic Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { CheckCircleIcon, CopyIcon } from "@phosphor-icons/react";
import { useRef, useState } from "react";
import { DynamicButton } from "@/components/ui/dynamic-button";

export default function CopyPrimary() {
  const [done, setDone] = useState(false);
  const timerRef = useRef<number | null>(null);
  const Icon = done ? CheckCircleIcon : CopyIcon;

  function handleClick() {
    setDone(true);
    if (timerRef.current !== null) {
      window.clearTimeout(timerRef.current);
    }
    timerRef.current = window.setTimeout(() => {
      setDone(false);
      timerRef.current = null;
    }, 1200);
  }

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
      <DynamicButton
        variant="primary"
        icon={
          <Icon
            aria-hidden="true"
            className={done ? "text-green-500" : undefined}
            size={15}
            weight={done ? "fill" : "bold"}
          />
        }
        onClick={handleClick}
        stateKey={done ? "done" : "copy"}
        type="button"
      >
        Copy
      </DynamicButton>
    </div>
  );
}