A slide-to-pay track: drag the knob with rubber-band resistance at both ends, and past the threshold it locks, spins and draws a check. Short drags spring back with an overshoot.
Order #4821 · 3 items
$48.00
npx shadcn@latest add https://hyperblur.dev/r/button-swipe-confirm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-swipe-confirm.tsx.
import { ButtonSwipeConfirm } from "@/components/hyperblur/button-swipe-confirm"
<ButtonSwipeConfirm label="Slide to pay $48.00" onConfirm={() => pay()} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to pay $48.00" | Shimmering text inside the track and accessible name of the knob. |
| pendingLabel | string | "Processing" | Text shown while the confirmation is pending. |
| doneLabel | string | "Payment sent" | Text shown once confirmed. |
| onConfirm | () => unknown | undefined | Called when the pending phase ends and the track turns to its done state. |
| threshold | number | 0.88 | Fraction of the track the knob must pass to confirm on release. |
| pendingDuration | number | 1100 | Milliseconds the spinner shows before the done state. |
| resetAfter | number | 0 | Milliseconds before returning to idle after done. 0 keeps the done state. |
| accent | string | "#2f7bff" | Fill, focus ring and check color. |
| disabled | boolean | false | Disables interaction and dims the control. |