Skip to content

Magnetic Button

A button that leans toward the mouse and springs back when it leaves.

Halden R · ships 14 October

From £1,890

import { MagneticButton } from '@brand-studio/ui';
import { ArrowRight } from 'lucide-react';

export default function MagneticButtonDemo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 24, width: '100%', maxWidth: 560, padding: '28px 32px', borderRadius: 20, background: 'var(--bs-elevated)', border: '1px solid var(--bs-line-soft)' }}>
      <div>
        <p style={{ margin: '0 0 4px', fontSize: 13, color: 'var(--bs-muted)' }}>Halden R · ships 14 October</p>
        <p style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>From £1,890</p>
      </div>
      <MagneticButton shape="pill">Pre-order <ArrowRight size={16} aria-hidden="true" /></MagneticButton>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, MagneticButton } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { MagneticButton } from '@brand-studio/ui';

<MagneticButton shape="pill">Pre-order</MagneticButton>

It takes every Button prop. strength scales how far it leans; 1 moves the button up to 10 px.

Accessibility

It is an ordinary button, so keyboard and screen reader use is unchanged.
Only a mouse moves it. Touch, pen and reduced motion get a still button.

API Reference

Prop	Type	Default
`tone?`	`"inverse" \| "primary" \| "secondary"`	–
`shape?`	`"default" \| "pill"`	–
`loading?`	`boolean`	–
`strength?`	`number`	`1`

Also accepts every ButtonHTMLAttributes<HTMLButtonElement> attribute.