Skip to content

Hold Button

rAF

A destructive action that needs a press and hold, with a fill that shows progress.

Confirmed 0 times

Install

$ npx shadcn@latest add https://spotcheckui.com/r/hold-button.json

No motion engine needed.

Usage

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

<HoldButton duration={1200} onConfirm={deleteWorkspace}>Hold to delete</HoldButton>

Letting go early cancels. Once confirmed, screen readers hear "Confirmed" and pressing again resets it.

Props

  • durationnumberDefault 1200How long to hold, in milliseconds.
  • onConfirm() => voidDefault —Runs once the hold completes.
  • confirmedLabelstringDefault Done · press to resetReplaces the label after the hold completes. Pressing again resets the button.

Keyboard

SpaceHold to confirm
EnterHold to confirm

Reduced motion

The fill stays, because it's the only sign of how long is left. Nothing else moves.