Magnetic Button React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import MagneticButton from "./MagneticButton";

export default function Example() {
  return (
    <MagneticButton
      children={"Get in touch ↗"}
      strength={20}
      background={"#e7dffc"}
      color={"#241c36"}
      borderRadius={32}
      disabled={false}
    />
  );
}

Using Magnetic Button

Place the action label in children and connect onClick to your application. strength controls how far the button follows the pointer.

Leave a little space around the button so it can move without colliding with nearby controls. Use disabled when its action is unavailable.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Button contents, including text or icons.
strength	number	No	16	Maximum total pointer travel in pixels.
background	string	No	"#e7dffc"	CSS background for the button.
color	string	No	"#241c36"	Text colour.
borderRadius	number	No	999	Corner radius in pixels; large values create a pill.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.
disabled	boolean	No	false	Disable native button interaction.
onPointerMove	function	No	undefined	Standard native button event handler.
onPointerLeave	function	No	undefined	Standard native button event handler.
onBlur	function	No	undefined	Standard native button event handler.
onClick	(event) => void	No	undefined	Standard button click handler. All other native button props are forwarded.