Morphing State Button

Installation

npx kinetic-ui-cli@latest add morphing-state-button

How It Works

The MorphingStateButton uses framer-motion's magical layout prop. Instead of awkwardly swapping CSS classes, the component physically mathematically calculates the difference between its idle pill shape and its loading circular shape, and animates the width, height, and border-radius flawlessly. It also manages its own async state natively.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { MorphingStateButton } from "@/components/creative/morphing-state-button";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MorphingStateButton } from "@/components/creative/morphing-state-button";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MorphingStateButton
        onClick{/* value */}
        idleText="example"
      />
    </div>
  );
}