Components
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.
npx shadcn@latest add https://21st.dev/r/dqnamo/dynamic-buttonLoading preview...
"use client";
import { SpinnerIcon } from "@phosphor-icons/react";
import { DynamicButton } from "@/components/ui/dynamic-button";
export default function ProcessingSecondary() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
<DynamicButton variant="secondary" icon={<SpinnerIcon aria-hidden="true" className="animate-spin" size={15} weight="bold" />}>
Processing
</DynamicButton>
</div>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...