Fuse Button

A button with a burning fuse that gives users a countdown to undo a destructive action.

Overview

FuseButton wraps Button with a fuse mechanic: pressing the idle button lights the fuse, which burns as a glowing border from the top middle clockwise. A second press while it burns cancels the action. When the fuse reaches zero, onFire is called.

State is fully controlled by the parent. The parent decides whether to light the fuse in onActivate (e.g., after validation), and it resets active to false in both onFire and onUndo.

Preview

Customize

Variant

Size

Shape

Icon

Icon Position

Text

Undo Label

Duration

5000ms

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add fuse-button

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"use client";
import { useState } from "react";
import { FuseButton } from "@/components/ui/fuse-button";

export function DeleteAction() {
  const [active, setActive] = useState(false);

  return (
    <FuseButton
      variant="destructive"
      active={active}
      onActivate={() => setActive(true)}
      onFire={() => {
        setActive(false);
        // perform delete
      }}
      onUndo={() => setActive(false)}
    >
      Delete
    </FuseButton>
  );
}

Examples

Default

Click to light the fuse. A glowing border burns down from the top. Click again before it runs out to undo.

Icon / circle

Icon-size buttons use shape="circle" for a round fuse. The countdown number appears inside.

In practice

A file row with a destructive delete action. The 4-second fuse gives users a moment to reconsider without a separate confirmation dialog.

My document.pdf

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`active`	boolean	—	Whether the fuse is lit. The parent sets this to true in onActivate after validation.
`onActivate`	() => void	—	Called when the button is pressed while idle.
`onFire`	() => void	—	Called when the fuse burns out. The parent should set active back to false.
`onUndo`	() => void	—	Called when the button is pressed while lit. The parent should set active back to false.
`duration`	number	`5000`	Length of the fuse in ms.
`undoLabel`	string	`"Undo"`	Label shown while lit, followed by the seconds left. For icon sizes this becomes the accessible name.
`shape`	"rect" \| "circle"	`"rect"`	rect traces the button corner radius. circle makes the button round and burns along a true circle.
`variant`	ButtonProps["variant"]	—	Button variant for the idle state. Destructive buttons burn red.
`size`	ButtonProps["size"]	—	Button size. Icon sizes show only the countdown number.

Accessibility

FuseButton is a native <button> in both states. Keyboard users can activate it with Enter or Space. It stays focusable and clickable while the fuse burns.

For icon-only buttons, pass aria-label. While the fuse burns, the label switches to undoLabel so screen readers announce the undo affordance.
The SVG fuse graphic is aria-hidden — the button's text label or countdown communicates state.
The button uses tabular-nums while active so the layout stays stable as the number changes.