KQ-1509 · FUSE/CONFIRM

Fuse Confirm

A destructive button whose edge is a fuse: one press lights the spark at the tip of a little wick, and it burns once round the button in `time` seconds, consuming the cord to ash behind it under a thin trail of smoke while the face counts down on a digit wheel turned by springs.snap. When the spark gets back to the start the action fires with a small spray of streaks and a flash along the spent cord; pressing again, or Escape, stamps it out — the spark squashes flat under a puff of smoke and the cord is re-laid back to the wick on springs.glide. It is a native button (Enter and Space press it) whose face presses in on springs.flick, and a polite live region announces the lighting, the last seconds and the outcome.

KQ-1509 · FUSE/CONFIRM

Delete workspace

Removes 14 boards and their history from Basinworks.

armed · press to light the fuse

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/fuse-confirm

Props

label: string; default —; What the button does: its text and accessible name at rest.
cancelLabel: string; default "Cancel"; The text while the fuse burns, beside the countdown.
firedLabel: string; default "Done"; The text once the action has fired.
lit / defaultLit: boolean; default — / false; Whether the fuse is burning, controlled or lit on mount. A host that refuses a press gets its own state back.
onLitChange: (lit: boolean) => void; default —; Fires from the press that lit or put out the fuse, and with false when it fires.
onConfirm: () => void; default —; Called once, when the spark gets back to the start.
onCancel: () => void; default —; Called when the visitor puts a burning fuse out.
time: number; default 4; How long the fuse burns, in seconds: the spark's speed round the edge and the countdown.
spark: number; default 0.6; How fierce the spark is, 0 to 1: its glow, its rays, the smoke and the sizzle.
color: "ember" | "ruby" | "gold" | "cobalt" | string; default "ember"; The fire's colour: a named pigment drawn from the theme's hues at a fixed lightness, or any CSS colour.
smoke: boolean; default true; Smoke rises from the spark as it burns, and puffs where it is stamped out.
resetAfter: number; default 2200; How long the fired state shows before a fresh fuse is laid, in ms; 0 keeps it until the host lights it again.
icon: ReactNode; default —; The icon beside the label at rest. Defaults to a bin.
remainingText: (seconds: number) => string; default —; The spoken countdown for the last three seconds. Defaults to "3 seconds left".
size: "sm" | "md" | "lg"; default "md"; Button height 32, 40 or 48px, with matching radius, type and wick.
sound: boolean; default false; A sizzle while it burns (rising as it nears the end) and a pop when it fires or is stamped out; only after the visitor's press.
disabled: boolean; default false; Disables the button; a burning fuse is put out.
className: string; default —; Classes for the root, which adds a 12px frame round the button for the wick, smoke and spray (pass -m-3 to align the button itself).

Prop	Type	Default	Description
label	string	—	What the button does: its text and accessible name at rest.
cancelLabel	string	"Cancel"	The text while the fuse burns, beside the countdown.
firedLabel	string	"Done"	The text once the action has fired.
lit / defaultLit	boolean	— / false	Whether the fuse is burning, controlled or lit on mount. A host that refuses a press gets its own state back.
onLitChange	(lit: boolean) => void	—	Fires from the press that lit or put out the fuse, and with false when it fires.
onConfirm	() => void	—	Called once, when the spark gets back to the start.
onCancel	() => void	—	Called when the visitor puts a burning fuse out.
time	number	4	How long the fuse burns, in seconds: the spark's speed round the edge and the countdown.
spark	number	0.6	How fierce the spark is, 0 to 1: its glow, its rays, the smoke and the sizzle.
color	"ember" \| "ruby" \| "gold" \| "cobalt" \| string	"ember"	The fire's colour: a named pigment drawn from the theme's hues at a fixed lightness, or any CSS colour.
smoke	boolean	true	Smoke rises from the spark as it burns, and puffs where it is stamped out.
resetAfter	number	2200	How long the fired state shows before a fresh fuse is laid, in ms; 0 keeps it until the host lights it again.
icon	ReactNode	—	The icon beside the label at rest. Defaults to a bin.
remainingText	(seconds: number) => string	—	The spoken countdown for the last three seconds. Defaults to "3 seconds left".
size	"sm" \| "md" \| "lg"	"md"	Button height 32, 40 or 48px, with matching radius, type and wick.
sound	boolean	false	A sizzle while it burns (rising as it nears the end) and a pop when it fires or is stamped out; only after the visitor's press.
disabled	boolean	false	Disables the button; a burning fuse is put out.
className	string	—	Classes for the root, which adds a 12px frame round the button for the wick, smoke and spray (pass -m-3 to align the button itself).