A magnetic button that is pulled toward the cursor on hover and springs back on leave.
The import and the props worth knowing about, in one place.
import { Button20 } from "@/components/beste/component/button20";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
// Compose the link with the render prop: your Link becomes the rendered
// element and the button content stays as its children.
<Button20 label="Let's talk" render={<Link href="/contact" />} />
<Button20
label="See the work"
icon={ArrowRight} // optional leading icon
tone="primary" // "dark" (default) | "primary"
strength={0.4} // cursor pull, 0–1 (default 0.25)
onClick={() => console.log("see the work")}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Move the pointer near it | The button leans towards the cursor; `strength` is how far it is willing to go. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Button label |
asChild | boolean | — | Compose the rendered element shadcn-style (radix asChild): your element (e.g. a router Link) becomes the root and the button content is injected as its children. Pass the element without children of its own. |
children | React.ReactElement | — | The element to render when `asChild` is set (e.g. your framework's Link) |
href | string | — | Fallback link: renders a plain `<a>`. Prefer `asChild` with your framework's Link component for client-side navigation. |
icon | LucideIcon | — | Optional leading icon |
tone | "dark" | "primary" | — | Surface tone: solid dark (default) or primary |
strength | number | — | How strongly the button follows the cursor (0–1, defaults to 0.25) |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click handler (used when there is no href and no asChild) |
className | string | — | Additional classes merged onto the button |