# MagneticButton

Source: https://lumeo.nativ.sh/components/magnetic-button

# MagneticButton

A container that translates toward the cursor when it enters the magnetic radius, creating a satisfying pull effect.

## When to Use

-   Call-to-action buttons that benefit from playful cursor interaction.
-   Navigation items or social links on landing pages.
-   Any interactive element where subtle magnetism adds delight without distraction.

Preview Code

Magnetic CTA Button

Get Started

Copy Code

Preview Code

Custom Radius & Translation

More Pull

Less Pull

Copy Code

## API Reference

Property

Type

Default

Description

ChildContent

RenderFragment?

null

The element(s) that will be magnetically attracted.

Radius

int

80

Radius in px within which the magnet activates.

MaxTranslate

int

20

Maximum translation in px in any direction.

TransitionDuration

string

"300ms"

CSS transition duration for the settle-back animation.

## Related Components

-   [Dock](/components/dock) — macOS-style dock with magnification on hover.
-   [Spotlight](/components/spotlight) — Radial gradient spotlight following the cursor.