Slide Commit

Slide-to-confirm control with a handle that squashes against the wall, unfurls into a done pill on success and springs home with a shake on failure.

Default

Drag the handle to the end, or focus it and press End. Change the outcome in the panel to see the error path.

Outcome

Latency1200ms

LabelDone LabelError Label

Track

Handle

Success

Danger

Width280px

Height56px

Radius28px

Speed50

Return Bounce0.38

Landing Dip0.026

Hold1500ms

Disabled

Prop	Type	Default	Description
`label`	`string`	`'Slide to pay'`	The instruction centred in the pill. The capsule wipes it as you drag.
`doneLabel`	`string`	`'Paid'`	The words beside the check once confirmed.
`errorLabel`	`string`	`'Payment failed'`	Replaces the instruction, in the danger colour, after a rejected promise.
`onConfirm`	`() => void \| Promise<unknown>`	-	Called when the handle reaches the end. Return a promise to show the spinner. It unfurls on resolve and springs home on reject.
`trackColor`	`string`	`'#262626'`	The pill behind the handle.
`handleColor`	`string`	`'#f5f5f5'`	The handle and the ground it paints. The arrow colour is picked to read on it.
`successColor`	`string`	`'#22c55e'`	Fill of the done pill.
`dangerColor`	`string`	`'#e5484d'`	Tint of the handle and error label after a reject.
`width`	`number`	`280`	Track width in pixels. The travel scales with it.
`height`	`number`	`56`	Track height in pixels. The handle is 8px smaller.
`radius`	`number`	`28`	Track corner radius. The handle corner is 4px smaller so the two stay concentric.
`speed`	`number`	`50`	How fast the unfurl and the return take over once you let go.
`returnBounce`	`number`	`0.38`	Energy left when the handle returns to the wall. 0 stops dead, 0.38 fills the 8% squash.
`landingDip`	`number`	`0.026`	How much the track dips as the done pill lands. 0 removes it.
`holdMs`	`number`	`1500`	How long the done pill stands before it closes back. 0 keeps it until the component remounts.
`disabled`	`boolean`	`false`	Dims the control and ignores input.

Event	Description
`done`	Emitted when the done pill unfurls.
`error`	Emitted with the rejection reason. The component swallows it otherwise.

Slot	Description
`icon`	Replaces the arrow in the handle.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Arrow Right` + `Arrow Up`	Moves the handle forward by a tenth of the travel. Reaching the end confirms.
`Arrow Left` + `Arrow Down`	Moves the handle back by a tenth of the travel.
`End`	Confirms at once.
`Home` + `Escape`	Cancels a drag or returns the handle to the start.

The handle is a slider with aria-valuenow and aria-valuetext tracking its position. A live region announces working, done and failed.
With prefers-reduced-motion the handle returns with a short tween instead of a spring and the spinner breathes instead of turning.