Hold Button

Press-and-hold action with progress and cancellation

A deliberate alternative to an ordinary click for consequential actions. Progress follows the pointer or keyboard hold, releasing early cancels cleanly, and completion resolves into a calm success state.

Preview

Release early to cancel.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/hold-button.json

Usage

Import the component:

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

Use it in your code:

<HoldButton
  duration={1300}
  successLabel="Published"
  onComplete={() => publish()}
>
  Hold to publish
</HoldButton>

Props

Property	Type	Default	Description
duration	number	1200	Time in milliseconds the button must remain pressed.
successLabel	ReactNode	"Confirmed"	Content shown after a complete hold.
resetAfter	number	1600	Delay before returning to idle. Pass 0 to keep the success state.
onComplete	() => void	—	Called once progress reaches 100 percent.
onCancel	() => void	—	Called when an in-progress hold ends early.
onProgressChange	(progress: number) => void	—	Reports normalized progress from 0 to 1.

Components