Fuse Button

Hold to confirm. Two sparks burn round the border from where you pressed and meet on the far side exactly when the hold completes; let go early and the burn recedes.

$149 once · every Pro piece

Customize

Label

Confirmed label

Hold (ms)

Size

Reset after (ms)

Disabled

Space or Enter hold it from the keyboard, Escape cancels.

Install

npx shadcn@latest add @obsyde/fuse-button

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { FuseButton } from '@/components/obsyde/ember/fuse-button/FuseButton';

export function Example() {
  return (
    <FuseButton label="Hold to delete" confirmedLabel="Deleted" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/fuse-button/FuseButton.tsxcomponent
ember/fuse-button/fuse-button.cssstyles
ember/fuse-button/FuseButtonDemo.tsxdemo
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`label`Label	`string`	`'Hold to delete'`
`confirmedLabel`Confirmed label	`string`	`'Deleted'`
`holdMs`Hold (ms)	`number`	`1200`
`size`Size	`'sm' \| 'md' \| 'lg'`	`'md'`
`resetMs`Reset after (ms)	`number`	`1800`
`disabled`Disabled	`boolean`	`false`