Fuse button

An action button whose done state carries an undo on a burning fuse. Press it and a ghost Undo button appears inside it while its outline burns down. Undo before it burns out, or the action sticks.

Buttons, press, then a timed undo, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/fuse-button.tsx https://motion-brew.com/r/fuse-button.tsx

One self contained file for React and Tailwind CSS: fuse-button.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { Trash2 } from "lucide-react";
import { FuseButton } from "@/components/fuse-button";

export default function Page() {
  return (
    <FuseButton
      icon={<Trash2 className="size-4" />}
      doneLabel="Deleted"
      radius={22}
      onCommit={() => hideRow(id)}
      onUndo={() => showRow(id)}
    >
      Delete
    </FuseButton>
  );
}

With `commitOn="press"` (the default), apply the change optimistically in `onCommit` and reverse it in `onUndo`. With `commitOn="fuse"`, `onCommit` only fires once the fuse runs out.

Props

Prop	Type	Default	Description
children	ReactNode	"Archive"	Action label
icon	ReactNode	archive icon	Icon before the label, null for none
doneLabel	ReactNode	"Archived"	Shown with a check once the fuse runs out
undoLabel	ReactNode	"Undo"	Undo button label
size	"sm" \	"md" \	"lg"	"md"	Height and padding
radius	number	fully rounded	Corner radius, px
textColor	string	near-black	Any CSS color
background	string	white	Any CSS color
fuseColor	string	"#f5a524"	Fuse and embers
duration	number	4000	Undo window, ms
fuseThickness	number	2.5	Fuse stroke, px
crossfade	number	320	State swap length, ms
commitOn	"press" \	"fuse"	"press"	When onCommit fires
afterFuse	"reset" \	"stay"	"reset"	Back to the action, or stay done
resetAfter	number	1600	Done state length before a reset, ms
pauseOnHover	boolean	false	Pause the fuse under the pointer
onCommit	() => void		The action applies
onUndo	() => void		Undo pressed in time
disabled	boolean		Disables the action

More buttons

Magnetic button: A button that leans toward your cursor on a spring.
Hold to confirm: Hold to fill, let go to cancel.
Bell toggle: A pill toggle where a press rings the bell, crossfades the label and unfurls the pill.
Slide commit: Slide to confirm: drag the handle past the line and it commits with a spinner and a green check; let go early and it springs home.

All animated react button components