Ghost Button

The install writes a single file to components/ui/GhostButton.tsx, which exports GhostButton.

import { GhostButton } from "@/components/ui/GhostButton";

<GhostButton>Label</GhostButton>

The secondary-action partner to Primary Button, so emphasis hierarchy is a component choice, not a className hunt.

Outline / low-fill treatment, same size and focus system as Primary.

Every line below was read out of the file you are about to copy, so you can check each one against the source at the bottom of this page.

• Has an explicit prefers-reduced-motion branch: the animation is dropped for an instant state change, and the component stays fully usable without it.
• Draws a focus-visible ring that is separate from its hover treatment, so keyboard users get an affordance mouse users do not take away.

Two clearly-ranked buttons stop teams from putting two solid buttons side by side, which destroys the visual hierarchy of a form.

1 required, 0 optional.

One file, no runtime package. Copy it, or install it with the command at the top of this page.

export function GhostButton({ children }: { children: React.ReactNode }) {  return (    <button className="group relative inline-flex items-center justify-center overflow-hidden rounded-lg border border-stone-300 px-5 py-2.5 text-sm font-medium text-stone-700 transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500 active:scale-[0.97] dark:border-stone-600 dark:text-stone-200">      <span        aria-hidden        className="absolute inset-0 origin-left scale-x-0 bg-amber-700 transition-transform duration-300 ease-out group-hover:scale-x-100 motion-reduce:transition-none dark:bg-amber-700"      />      <span className="relative transition-colors duration-300 group-hover:text-white">        {children}      </span>    </button>  );}