Slide To Confirm

A highly interactive slide-to-action button frequently used for critical operations like payments or deleting records.

How to Import

Add this import to your component file

app/page.tsx

1import { SlideToConfirm } from "@/components/lightswind/slide-to-confirm"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

text	string	"Slide to confirm"	The text displayed on the slider track.	Optional
successText	string	"Confirmed"	The text displayed after successful confirmation.	Optional
onConfirm	() => Promise<void> \| void	-	Callback function triggered when the slider reaches the end.	Required
width	number	320	The width of the component in pixels.	Optional
height	number	56	The height of the component in pixels.	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { SlideToConfirm } from "@/components/lightswind/slide-to-confirm";
2
3export function ConfirmDemo() {
4  const handleConfirm = async () => {
5    // Simulate async operation
6    await new Promise(resolve => setTimeout(resolve, 1500));
7  };
8
9  return (
10    <div className="flex justify-center py-12">
11      <SlideToConfirm onConfirm={handleConfirm} />
12    </div>
13  );
14}

Previousseasonal-hover-cards

Nextsliding-cards

A product byＭＵＨＩＬＡＮ and Team❤️.

Slide To Confirm

A highly interactive slide-to-action button frequently used for critical operations like payments or deleting records.

...

How to Import

Add this import to your component file

app/page.tsx

1import { SlideToConfirm } from "@/components/lightswind/slide-to-confirm"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

text	string	"Slide to confirm"	The text displayed on the slider track.	Optional
successText	string	"Confirmed"	The text displayed after successful confirmation.	Optional
onConfirm	() => Promise<void> \| void	-	Callback function triggered when the slider reaches the end.	Required
width	number	320	The width of the component in pixels.	Optional
height	number	56	The height of the component in pixels.	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { SlideToConfirm } from "@/components/lightswind/slide-to-confirm";
2
3export function ConfirmDemo() {
4  const handleConfirm = async () => {
5    // Simulate async operation
6    await new Promise(resolve => setTimeout(resolve, 1500));
7  };
8
9  return (
10    <div className="flex justify-center py-12">
11      <SlideToConfirm onConfirm={handleConfirm} />
12    </div>
13  );
14}

Previousseasonal-hover-cards

Nextsliding-cards

A product byＭＵＨＩＬＡＮ and Team❤️.

Slide To Confirm

How to Import

Props

Basic Usage

On This Page

Contribute

Slide To Confirm

How to Import

Props

Basic Usage

On This Page

Contribute

React Slide To Confirm Component - Lightswind UI

Key Details of React Slide To Confirm

Slide To Confirm

How to Import

Props

Basic Usage

On This Page

Contribute

Slide To Confirm

How to Import

Props

Basic Usage

On This Page

Contribute