ButtonsNew
Magnetic Button
The button pulls toward the cursor when the mouse is near and springs back. Turns itself off on touch screens.
Customize
color
glowColor
highlightColor
Based on Magnetic Button (MIT license) ยท Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| strength | number | 0.3 | How strongly the button pulls toward the cursor. |
| radius | number | 150 | Distance at which the pull starts, in pixels. |
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | "default" | Button style. |
| size | 'default' | 'sm' | 'lg' | 'icon' | "default" | Button size. |
| disabled | boolean | false | Disable the button and the effect. |
| springConfig | { duration?: number; bounce?: number } | "{ bounce: 0.1, duration: 0.4 }" | Spring settings. |
| asChild | boolean | false | Pass the styles to the child, e.g. a link. |
| children | ReactNode | โ | Button text and icon. |
| color | string | "#ffffff" | Fill color of the button. Text turns dark or white on its own. |
| glowColor | string | "rgba(255,255,255,0.25)" | Soft glow under the button. |
| highlightColor | string | "rgba(255,255,255,0.6)" | Thin sheen along the top edge. |
Dependencies
5 required packages
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-merge