Morph Confirm

Buttons

About

A button that morphs in place into an inline confirmation card with a cancel/confirm action, for destructive or sensitive actions that need a quick inline double-check.

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

Code

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

Usage.tsx

import { MorphConfirm } from "@/components/ui/morph-confirm";
import { FingerprintIcon } from "lucide-react";
import { Toaster, toast } from "sonner";

export default function MorphConfirmDemo() {
  return (
    <div className="flex h-72 w-full items-end justify-center pb-6">
      <Toaster position="top-center" />
      <MorphConfirm
        label="Receive"
        title="Confirm"
        icon={<FingerprintIcon className="text-[var(--dx-blue-3)]" />}
        description="Approve this transfer of 2.4 ETH to your main wallet?"
        onConfirm={() => toast.success("Transfer approved")}
      />
    </div>
  );
}