Loading…

Magnetic Button

beta

A button that drifts toward the pointer — optionally with its label leaning further — and springs back when it leaves.

Forms
1 file
No extra npm packages
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add magnetic-button

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { MagneticButton } from "@/components/ui/magnetic-button";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Layered
With Radius
As Link

API

Generated from the component's own types, so a prop cannot appear here without existing.

<MagneticButton>

Prop	Type	Default
`contentStrength` The content's total pull, for a layered effect. Set it above `strength` and the label leans further than the button around it. Ignored with `asChild`, whose single child cannot be wrapped.	`number`	—
`radius` How far beyond its edges, in pixels, the button starts to feel the pointer. The pull fades to nothing at this distance. 0 (the default) keeps the effect within the button's own bounds.	`number`	`0`
`strength` How far the button drifts toward the pointer, as a fraction of the pointer's distance from its centre. 0 turns the effect off.	`number`	`0.35`

Accessibility

The drift is decoration on an ordinary Button: name, role and keyboard behaviour are unchanged. It never runs for touch or coarse pointers, or under prefers-reduced-motion, and a disabled or loading button stays put. The `radius` option listens on the window rather than widening the hit area, so it never steals clicks from neighbouring controls.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

contentStrength

The content's total pull, for a layered effect. Set it above strength and the label leans further than the button around it. Ignored with asChild, whose single child cannot be wrapped.

number

—

radius

How far beyond its edges, in pixels, the button starts to feel the pointer. The pull fades to nothing at this distance. 0 (the default) keeps the effect within the button's own bounds.

number

0

strength

How far the button drifts toward the pointer, as a fraction of the pointer's distance from its centre. 0 turns the effect off.

number

0.35