Slide to Confirm
A slide-to-confirm track: drag the lit knob to the end to confirm, with a spring back, shimmer hint, keyboard alternatives, pending and success morph, and a destructive variant.
Preview
Order total
$48.00
Default · drag, arrows, or hold Enter
Slide to pay $48.00
Confirmed
Paid · receipt sentPaid · receipt sent
Danger zone
Can't be undone
Destructive
Slide to delete project
Disabled
Slide to transfer ownership
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to confirm" | The shimmering hint; also the slider's accessible name. |
| pendingLabel / successLabel | string | "Working…" / "Confirmed" | Shown while onConfirm's promise runs, and once confirmed. |
| onConfirm | () => void | Promise<unknown> | — | Called when the knob reaches the end. A promise shows a pending state; a rejection springs it back. |
| variant | "default" | "destructive" | "default" | Destructive uses the danger key and a danger trail. |
| holdDuration | number | 700 | Ms Enter or Space must be held to confirm from the keyboard. |
| resetAfter | number | — | Return to idle this many ms after confirming; omit to stay confirmed. |
| defaultConfirmed | boolean | false | Start in the confirmed state. |
| disabled | boolean | false | Dims and ignores input. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.