A slide-to-confirm track for actions that should not happen by accident: the thumb follows the pointer continuously, the label fades as it travels while a soft light runs across the label at rest, and letting go before the end springs the thumb back. Reaching the end, or flicking past halfway, morphs the thumb into a check that draws itself in, swaps the label, fires onConfirm and resets on its own or stays confirmed. It is a real slider for assistive technology: holding the Right arrow slides it through, while End, Enter or Space complete at once. The track is never narrower than its longest label. Destructive or default tone, three sizes, custom thumb icon, and controlled or uncontrolled confirmed state.
The import and the props worth knowing about, in one place.
import { ConfirmSlide } from "@/components/beste/component/confirm-slide";
<ConfirmSlide
className="w-full max-w-sm"
label="Slide to delete the album"
confirmedLabel="Album deleted"
tone="destructive"
onConfirm={() => console.log("Deleted")}
/>
<ConfirmSlide
label="Slide to publish"
resetAfter={null} // stay confirmed
size="lg" // "sm" | "default" | "lg"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Drag the thumb | Slide it to the end, or flick it past halfway, to confirm. Letting go earlier springs it back. |
|---|---|
| Hold Right arrow | Slides the thumb through on key repeat; releasing the key early springs it back. |
| End, Enter or Space | Confirm at once, the path for assistive technology. |
| Left arrow or Home | Send the thumb back to the start. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Written on the track, and the thumb's accessible name. |
confirmedLabel | string | — | Shown once the slide completes. |
icon | React.ComponentType<{ className?: string }> | React.ReactNode | — | A lucide icon component, or any node, on the thumb. |
onConfirm | () => void | — | |
confirmed | boolean | — | Whether the slide shows its confirmed state. Pair with `onConfirmedChange` to control it. |
defaultConfirmed | boolean | — | |
onConfirmedChange | (confirmed: boolean) => void | — | |
resetAfter | number | null | — | Ms before the confirmed state resets on its own. `null` keeps it. |
hint | string | — | The description read after the label. |
disabled | boolean | — | |
tone | "default" | "destructive" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |