Button

Installation

$ npx shadcn@latest add https://goodui.dev/r/button.json

The file lands in components/goodui/button.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/button works too.

Usage

import { ArrowRight } from "lucide-react"
import { Button } from "@/components/goodui/button"

export function Hero() {
  return (
    <div className="flex gap-3">
      <Button size="lg" shadow="glow" animation="arrow" iconRight={<ArrowRight />}>
        Start free trial
      </Button>
      <Button size="lg" variant="outline" tone="neutral">
        Book a demo
      </Button>
    </div>
  )
}

When to use

Examples

const [saving, setSaving] = React.useState(false)

<Button loading={saving} onClick={async () => { setSaving(true); await save(); setSaving(false) }}>
  Save changes
</Button>

<Button variant="ghost" tone="neutral" size="sm" iconOnly aria-label="Notifications">
  <Bell />
</Button>

API reference

Accessibility

• •Renders a native <button>, so roles, focus and form submission work without extra code.
• •loading sets disabled and aria-busy and keeps the width, so the layout does not jump.
• •iconOnly buttons need an aria-label; the icon itself is decorative.

Motion

• •Hover: lift rises 2px in 180 ms, glow blooms a tone-colored shadow, shine sweeps a highlight once, arrow nudges the icons.
• •Press: press scales to 0.95, bounce springs back from 0.92, ripple grows from the pointer.
• •Looping: shimmer sweeps every 2.6 s and pulse sends a ring every 2 s; keep looping buttons to one per screen.
• •Reduced motion: transitions, sweeps, rings and ripples are off; the loading spinner slows down instead of stopping.

• •All effects are CSS (transform, opacity, background-position) on the compositor; no JavaScript runs on hover. ripple adds one short-lived span per click.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related