Button

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/button

npx shadcn@latest add http://localhost:3002/r/button.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/button; inside this monorepo, from @rabtx/ui/button.

import { Button } from "@rabtx/ui/button";

export function Actions() {
  return (
    <>
      <Button variant="secondary">Cancel</Button>
      <Button type="submit">Save</Button>
    </>
  );
}

Hover grows the button to 1.02, only where a real mouse hovers. Pressing springs it down to 0.93 and back on a spring solved into a CSS linear() easing.

VariantsCopy Anchor Link

primary (the default), secondary, ghost and outline.

IconsCopy Anchor Link

Put HugeIcons in the children, before or after the text. They are sized for you.

StatesCopy Anchor Link

StatefulButton moves between idle, loading, success and error. The status icon widens in while the old one folds away, the label rolls over letter by letter, and the button eases to its new width. Loading sets aria-busy, blocks clicks and stays focusable. Click to try both.

import { type ButtonState, StatefulButton } from "@rabtx/ui/button";

const [state, setState] = useState<ButtonState>("idle");

<StatefulButton state={state} onClick={save}>
  Save changes
</StatefulButton>;

DisabledCopy Anchor Link

Half opacity and no pointer events. A native disabled attribute, so it also leaves the tab order.

RippleCopy Anchor Link

ripple spreads a soft disc of the text color from where you pressed. pressScale sets how far the press goes (1 turns it off).

LinkCopy Anchor Link

ButtonLink is an <a> that looks like a button, for navigation.

MagneticCopy Anchor Link

MagneticButton leans toward a mouse pointer and springs back when it leaves. strength is 0 to 1 (default 0.25). Touch, reduced motion and data-motion="off" keep it still.

MetallicCopy Anchor Link

MetallicButton has a polished chrome rim that drifts on a slow loop. Hover sweeps a highlight across it. paused holds the chrome still.

APICopy Anchor Link

Button takes everything a native <button> takes, plus:

StatefulButton adds:

MagneticButton adds strength (default 0.25). MetallicButton adds paused. ButtonLink takes the Button props on an <a>.

Outside React, buttonClass() from @rabtx/ui/button/styles returns the class names:

<button class="rx-btn rx-btn-outline rx-btn-sm">Edit</button>

ThemingCopy Anchor Link

The Button reads only the theme tokens, so it follows your theme with nothing to configure.

To restyle one button, set a token on it or on an ancestor, or pass Tailwind classes (they win over the component styles):

<div className="[--primary:var(--success)]">
  <Button>Approve</Button>
</div>
<Button className="rounded-md">Square-ish</Button>

pressScale changes how far a press scales (default 0.93).

How the motion worksCopy Anchor Link

AccessibilityCopy Anchor Link

• A real <button> with type="button" by default, and a 2px focus ring for the keyboard only.
• A rolling label is hidden from screen readers letter by letter; the whole label is read instead, and changes are announced politely.
• Loading keeps focus and full color, sets aria-busy and blocks clicks.
• With reduced motion labels cross-fade and nothing travels; with data-motion="off" states swap at once.