Components/Buttons
Drag Button
An interactive draggable button requiring a left-to-right swipe to confirm actions, featuring optional success animations and spring physics.
buttondragswipemotion
Preview
Installation
npx shadcn@latest add @grootstudio/drag-buttonUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | undefined | The content to display inside the button. | |
| onDragComplete | () => void | undefined | Callback triggered when the handle reaches the end of the button. | |
| showConfirmation | boolean | true | Whether to show the success animation after a successful drag. | |
| successIcon | ReactNode | <Check /> | Custom icon to show during the success animation. | |
| variant | default|outline | default | The visual style of the button. | |
| className | string | undefined | Optional class names for custom styling. |
Dependencies
motion/react
lucide-react