127 Components
Hold To Confirm Button
ButtonsPress-and-hold safety action button with a spring-pressured progress fill that recoils elastically when released early.
Press & hold for 1.4s (or Spacebar)
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/hold-to-confirm-button.json"
Props
TypeScript props supported by <HoldToConfirmButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Hold to Purge Cache" | Resting action label displayed inside the button. |
| confirmedLabel | string | "Cache Purged" | Success label displayed after the hold completes 100%. |
| holdDuration | number | 1400 | Hold duration in milliseconds required to confirm the action. |
| variant | "default" | "danger" | "default" | Visual style variant for standard or destructive actions. |
| disabled | boolean | false | Disables button interaction when true. |
| stiffness | number | 280 | Spring stiffness coefficient for progress fill and recoil. |
| damping | number | 24 | Spring damping coefficient for progress fill and recoil. |
| onConfirm | () => void | — | Callback fired when the hold completes 100%. |
| className | string | — | Additional Tailwind CSS classes for the button. |
Key Features
- 60fps requestAnimationFrame hold timer coupled to a Hooke's Law spring progress bar.
- Elastic recoil that snaps the fill bar back to 0% if the pointer or key is released before completion.
- Built-in reset cycle after confirmation so users can test repeated interactions.
Keyboard & Accessibility
- Uses aria-live='polite' to announce state transitions between idle, holding, and confirmed.
- Supports continuous Spacebar or Enter key hold for full keyboard parity.
- Disables scale compression when prefers-reduced-motion is enabled.