Hold Button

Hold to confirm: a tube fills, release drains it.

checkout-web@a41f9c2

Preview passed 214 checks · 3m ago

Preview

Goes live for every customer.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/hold-button.json

import { HoldButton } from "@/components/ui/hold-button"

<HoldButton completeLabel="Promoted" onComplete={promote}>Hold to promote</HoldButton>

A longer hold for a bigger consequence. resetDelay={Infinity} keeps it confirmed.

onHoldStart, onHoldCancel (with how far it got) and onComplete. Keyboard: focus it and hold Space or Enter.

Match the hold to the weight of the action.

Also accepts every native button attribute. The ref points at the button.

Prop	Type	Default
`duration`	`number` Milliseconds of holding to confirm.	`1500`
`onComplete`	`() => void` Fires once when the tube fills.	None
`onHoldStart`	`() => void` Fires when a hold begins: pointer down, or Space/Enter down.	None
`onHoldCancel`	`(progress: number) => void` Fires when a hold is released early, with how full the tube got (0 to 1).	None
`completeLabel`	`ReactNode` Replaces the label once confirmed. A string is also announced to screen readers.	None
`resetDelay`	`number` Milliseconds the tube stays lit after release before it drains and re-arms. Infinity keeps it confirmed.	`1200`
`hint`	`string` Instructions linked with aria-describedby. Pass an empty string to drop it.	`"Press and hold to confirm."`
`size`	`"sm" \| "md" \| "lg"` 32, 40 or 48px tall, like Button.	`"md"`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`disabled`	`boolean` Dims the button and ignores holds.	`false`

Keyboard: hold Space or Enter. Releasing early, pressing Escape or moving focus away drains the tube.
Sliding the pointer well off the button lets go, like a native press. Touch scrolling cancels a hold too.
After a confirm the tube has to drain before it re-arms, so a quick second press can't confirm twice.
A click alone never confirms. Some assistive tech sends clicks instead of key holds, so for destructive actions keep another path such as a confirmation dialog or an undo.
Under prefers-reduced-motion the fill still tracks the hold (it is information); the flash and burst ring are skipped.