Dynamic Button

Buttons 45

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, FloppyDiskIcon } from "@phosphor-icons/react";
import { useRef, useState } from "react";
import { DynamicButton } from "@/components/ui/dynamic-button";

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

  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" : "save"}
        type="button"
      >
        Save
      </DynamicButton>
    </div>
  );
}