Press and hold to confirm. A fill sweeps across while held, letting go early snaps it back.
npx shadcn@latest add https://hyperblur.dev/r/hold-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hold-button.tsx.
import { HoldButton } from "@/components/hyperblur/hold-button"
<HoldButton onConfirm={() => deleteItem()}>Hold to delete</HoldButton>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| onConfirm | () => void | required | Called once the hold completes. |
| duration | number | 1200 | Milliseconds the button must be held. |
| color | string | "#2f7bff" | Fill and focus ring color. |
| confirmedLabel | string | "Done" | Label shown briefly after confirming. |
| disabled | boolean | false | Ignore presses and dim the button. |