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.

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

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.

• Draws a focus-visible ring that is separate from its hover treatment, so keyboard users get an affordance mouse users do not take away.

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="inline-flex h-10 items-center justify-center rounded-md border border-stone-300 px-4 text-sm font-medium text-stone-700 transition-colors duration-150 hover:border-amber-700 hover:bg-amber-700 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 active:scale-[0.98] active:bg-amber-800 disabled:pointer-events-none disabled:opacity-50 dark:border-stone-700 dark:text-stone-200 dark:hover:border-amber-700 dark:focus-visible:outline-emerald-400">      {children}    </button>  );}