ui-shrushank
componentghost-buttonsource: ok · refreshed
Ghost Button
A lower-emphasis outline button for secondary actions.
npx shadcn add "https://raw.githubusercontent.com/Shrootiiii/ui/main/r/ghost-button.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 11:06:53 AM
components/ui/GhostButton.tsx
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-amber-800 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-amber-300 dark:hover:border-amber-700 dark:hover:text-white dark:focus-visible:outline-emerald-400">
{children}
</button>
);
}