Slide Action Button

Buttons 76

About

A draggable slider button that requires the user to drag its thumb to the end to confirm an action, springing back if released too early.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slide Action Button to your project and fits it to your theme.

Code

How Slide Action Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import SlideActionButton from "@/components/ui/slide-action-button";

export default function SlideActionButtonDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <SlideActionButton
        completeLabel="Confirmed"
        onComplete={() => console.log("confirmed")}
      >
        Slide to confirm
      </SlideActionButton>
    </div>
  );
}