Slide to Confirm

Pro

Slide-to-confirm control for payments and other deliberate actions. The thumb follows your finger, shows progress while the action runs and ends with a check; a press-and-hold mode is included.

Preview

Installation

npx @lumioui/cli add pro/slide-to-confirm

Usage

import { SlideToConfirm } from "@/components/ui/slide-to-confirm/slide-to-confirm";
<SlideToConfirm />

Examples

Hold

Ending a focus session early costs a deliberate hold, not a tap.

Pay

Grocery checkout.

Start ride

The driver app at the curb.

API reference

Prop Type Default
label* string

Call to action — "Slide to pay $62.40", "Hold to start".

 —
mode "slide" | "hold"

"slide" (track + thumb) or "hold" (press-and-hold ring). Default "slide".

 "slide"
successLabel string

Shown after confirming. Default "Done".

 "Done"
loadingLabel string

Announced while onConfirm's promise is pending (busy dots show). Default "Processing".

 "Processing"
holdingLabel string

Hold mode: shown while the finger is down. Default "Keep holding".

 "Keep holding"
onConfirm () => void | Promise<unknown>

Fires on commit. Return a Promise to show busy dots until it settles.

 —
onSettled () => void

Fires once the success has held (700ms) — hand off to the next screen here.

 —
onReset () => void

Fires after a reset (auto or after an error).

 —
icon IconName

Thumb / centre glyph. Default "arrow-right" (slide) or a drawn lock (hold).

 —
holdMs number

Hold duration in ms. Default 1200.

 1200
threshold number

Slide fraction that commits on release. Default 0.85.

 0.85
autoResetMs number

Return to idle this many ms after success (never before the hold ends). Omit to stay confirmed.

 —
disabled boolean false
className string —