# Magnetic Button

> Leans toward the pointer and springs back.

A primary action with presence. The label travels further than the button for depth; clicks are never delayed, and it renders as a link with `href`.

- Family: Buttons
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/magnetic-button/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add magnetic-button
```

It installs to `components/galactrex/magnetic-button.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { MagneticButton } from "@/components/galactrex/magnetic-button";

<MagneticButton onClick={save}>Save changes</MagneticButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Label and optional icon. |
| `strength` | `number` | `10` | Largest pull toward the pointer in px. |
| `variant` | `"solid" \| "outline"` | `"solid"` | Accent fill or outline. |
| `href` | `string` | — | Render as a link. |
| `...button props` | `ButtonHTMLAttributes` | — | onClick, disabled, type and the rest. |

## Variants

- **Solid.** Accent fill for the main action.
- **Outline.** Line border for secondary actions.

## Accessibility

- A real <button> (or <a> with href) with a visible focus ring.
- The pull is off for touch, keyboard-only and reduced-motion visitors.

## Motion

- Spring follow through motion values; no re-render per move.
- A 3% press scale on tap, skipped with reduced motion.