Docs / Components / Slide To Confirm
Slide To Confirm
A smooth, responsive slide-to-confirm button component with fluid spring drag physics for desktop and mobile touch devices.
Slide to confirm
Dependencies
Install the following dependencies to use this component:
1npm install motion lucide-react clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add slide-to-confirm
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | 'Slide to confirm' | Text shown on track before sliding. |
| confirmedText | string | 'Confirmed' | Text shown on track after confirmation. |
| onConfirm | () => void | Promise<void> | undefined | Callback triggered on successful slide completion. |
| onReset | () => void | undefined | Callback triggered when reset. |
| isConfirmed | boolean | undefined | Controlled confirmed state. |
| disabled | boolean | false | Disabled state. |
| className | string | '' | Additional container CSS classes. |