Motion UIComponentsComponent

Hold to confirm

A press-and-hold button that wipes a destructive fill across the label as you confirm.

API reference

Components

`<HoldToConfirmButton />`

Destructive hold button with left-to-right fill wipe.

`holdSeconds?`

number = 2

Seconds to hold. Default 2.

`mode?`

"callback" | "success" = "callback"

Post-confirmation behaviour. Default "callback".

`successLabel?`

ReactNode = "Confirmed"

Label in "success" mode. Default "Confirmed".

`onConfirm?`

() => void

Fired when the hold completes.

`onCancel?`

() => void

Fired when the hold is released early.

`children?`

ReactNode

Button label, rendered in both progress layers.

`className?`

string

Merged onto the button.

`"aria-describedby"?`

string

Wired to aria-describedby.

Hooks

`useHoldToConfirm`

Headless press-and-hold gesture with a progress MotionValue.

useHoldToConfirm(options: UseHoldToConfirmOptions): UseHoldToConfirmResult

`holdSeconds?`

number = 2

Seconds to hold for confirmation. Default 2.

`onConfirm?`

() => void

Fired when a hold completes.

`onCancel?`

() => void

Fired when a hold is released early.

Returns

`progress`

MotionValue<number>

0 at rest, 1 confirmed.

`reset`

() => void

Snap progress back to 0 and clear the completed lock.

`holdHandlers`

{ onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => void onPointerUp: (event: React.PointerEvent<HTMLButtonElement>) => void onPointerCancel: (event: React.PointerEvent<HTMLButtonElement>) => void onPointerLeave: (event: React.PointerEvent<HTMLButtonElement>) => void onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void onKeyUp: (event: React.KeyboardEvent<HTMLButtonElement>) => void onContextMenu: (event: React.MouseEvent<HTMLButtonElement>) => void }

Spread onto the interactive element.

Featured in

See the hold to confirm composed into full sections.

Hold to confirm buttonAn example of a hold-to-confirm button with press-and-hold progress feedback in Motion for React.