Docs
Swipe Button
Swipe Button
A sleek swipe-to-validate button with animated text, smooth transitions.
Installation
pnpm dlx shadcn@latest add https://badtz-ui.com/r/swipe-button.json
Usage
import { SwipeButton } from "@/components/ui/swipe-button";<SwipeButton>Swipe to validate</SwipeButton>Props
swipe-button props.
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| text | string | The text displayed in the button | "Swipe to validate" |
| onSwipeComplete | () => void | Callback function triggered when swipe is completed | - |
| gap | number | Space around the swipe button in pixels | 3 |
| validationDuration | number | Duration of the success state in milliseconds | 2000 |
| className | string | Additional classes for custom styling | - |