Matte Save Cancel Buttons

Buttons

About

A paired save/cancel button control that animates through saving, saved and cancelled states with a progress fill and checkmark, for confirming or discarding pending edits in a form. Ported to React from SLtowl's MIT-licensed "Matte buttons" HTML/CSS/JS component.

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

Code

How Matte Save Cancel Buttons is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import MatteSaveCancel from "@/components/ui/matte-save-cancel";

export default function MatteSaveCancelDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-[#f5f4f2] p-10 text-[#222222]">
      <MatteSaveCancel
        previewDuration={1900}
        onSave={({ signal }) =>
          new Promise<void>((resolve, reject) => {
            if (signal.aborted) {
              reject(new DOMException("Cancelled", "AbortError"));
              return;
            }
            const abort = () => {
              clearTimeout(timer);
              reject(new DOMException("Cancelled", "AbortError"));
            };
            const timer = setTimeout(() => {
              signal.removeEventListener("abort", abort);
              resolve();
            }, 1900);
            signal.addEventListener("abort", abort, { once: true });
          })
        }
        onCancel={() => {
          // Connect your close, discard or navigation action here.
        }}
      />
    </div>
  );
}