Magnetic Button

Use Magnetic Button for a playful pointer interaction around a focused call to action. The element shifts toward the pointer within the configured range, then returns to its resting position.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/magnetic-button

Basic usage

magnetic-action.tsx

import Magnetic from "@/components/ui/magnetic-button/magnetic-button";
 
export function MagneticAction() {
return (
  <Magnetic>
    <button type="button">Explore work</button>
  </Magnetic>
);
}

Examples

Adjust the range and intensity to keep the response subtle. Use the parent interaction area when the surrounding surface should control the effect.

Usage


export default function MagneticButtonExample() {
  return (
    <div className="p-2 border border-border border-dashed rounded-full">
      <Magnetic interactionArea="parent">
        <button
          type="button"
          className="px-6 py-4 font-semibold text-foreground bg-background rounded-full cursor-pointer"
        >
          Magnetic Button
        </button>
      </Magnetic>
    </div>
  );
}

API

Property	Type	Default	Description
`children`	`ReactNode`	`required`	The content to be rendered inside the magnetic button.
`magneticIntensity`	`number`	`0.6`	The intensity of the magnetic pull effect.
`magneticRange`	`number`	`100`	The range within which the magnetic effect is active.
`interactionArea`	`"self" \| "parent"`	`"self"`	Defines the area of interaction for the magnetic effect.
`springConfig`	`SpringOptions`	`—`	Configuration for the spring animation.
`customClassName`	`string`	`—`	Additional class names for custom styling.
`className`	`string`	`—`	Additional classes for the wrapper. Prefer this for new usage.

Accessibility

Keep a real interactive element inside the wrapper and provide a clear action label. The pointer response is optional, so the content remains usable with keyboard input.

Styling

Use className on the wrapper and style the child control for the visual treatment. Reduced-motion preferences keep the button at rest.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.

Related components

Marquee

Depth Tiles

new