Morph Button

Buttons 8

About

An async action button that morphs between idle, loading, success, and error states with a spinner, a drawn-in check, and a shake on failure.

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

Code

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

Usage.tsx

"use client";

import React from "react";
import { MorphButton } from "@/components/ui/morph-button";

const fakeSave = () =>
  new Promise<void>((resolve) => setTimeout(resolve, 1200));

export default function MorphButtonDemo() {
  return (
    <div className="flex w-full flex-col items-center gap-5 py-10">
      <MorphButton
        onAction={fakeSave}
        loadingLabel="Saving"
        successLabel="Saved"
      >
        Save changes
      </MorphButton>
      <p className="text-sm text-neutral-500 dark:text-neutral-400">
        Click to run the full idle → loading → success cycle
      </p>
    </div>
  );
}