Loading…

Slide to Confirm

beta

A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.

Forms
1 file
3 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add slide-to-confirm

npm packages installed: class-variance-authority, motion, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Stays Confirmed
Press And Hold
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<SlideToConfirm>

Prop	Type	Default
`confirmedLabel` Shown and announced once confirmed ("Confirmed" / "Shutting down…").	`string`	—
`corner` Track radius in px, 0–28. The grip and wash use corner − 4. Default 28.	`number`	`28`
`disabled`	`boolean`	`false`
`fill`	`"light" \| "dark"`	`"light"`
`hint` Instructions linked to the grip with aria-describedby.	`string`	`"Drag to the end, or press and hold Enter or Space."`
`holdDuration` How long Enter, Space or a still pointer must be held to confirm (ms). Default 1000.	`number`	`1000`
`label` Names the grip and shows on the track. Defaults per variant.	`string`	—
`onConfirm` Called once each time the slide completes.	`() => void`	—
`resetAfter` Milliseconds before it resets itself; `null` stays confirmed. 1100 (confirm) / 2000 (power).	`number \| null`	—
`speed` Spring speed for the snap-back and morph, 0–100. Default 50.	`number`	`50`
`stroke`	`boolean`	—
`variant`	`"confirm" \| "power"`	`"confirm"`

Plus every attribute of <div> except children.

Accessibility

The grip is a real button named by the label and described by a hint. Pressing and holding Enter or Space (or holding the pointer still on it) carries the grip across over holdDuration and confirms; letting go early sends it back, so dragging is never the only way through. The result ("Confirmed" / "Shutting down…") is announced through a polite status region. The grip travels toward the inline end and its arrow mirrors in right-to-left layouts. Under reduced motion the springs are instant, the shimmer stops and the hold still works.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

confirmedLabel

Shown and announced once confirmed ("Confirmed" / "Shutting down…").

string

—

corner

Track radius in px, 0–28. The grip and wash use corner − 4. Default 28.

number

28

disabled

boolean

false

fill

"light" | "dark"

"light"

hint

Instructions linked to the grip with aria-describedby.

string

"Drag to the end, or press and hold Enter or Space."

holdDuration

How long Enter, Space or a still pointer must be held to confirm (ms). Default 1000.

number

1000

label

Names the grip and shows on the track. Defaults per variant.

string

—

onConfirm

Called once each time the slide completes.

() => void

—

resetAfter

Milliseconds before it resets itself; null stays confirmed. 1100 (confirm) / 2000 (power).

number | null

—

speed

Spring speed for the snap-back and morph, 0–100. Default 50.

number

50

stroke

boolean

—

variant

"confirm" | "power"

"confirm"