Button
3 variants (primary / secondary / ghost) × 3 sizes (sm / md / lg), icon-friendly, and asChild via Radix Slot for polymorphic rendering.
Source
src/components/ui/button.tsxVariants
primary is the acid-green default, secondary gets a bordered outline, ghost is a text-only hover affordance.
Sizes
sm / md / lg share Input heights so they line up in toolbars without eyeballed offsets.
With icons
The base style includes gap-2, so drop a lucide icon before or after the label.
asChild — render as a Next.js Link
asChild forwards all button styles to the child element via Radix Slot. Use it when you need an anchor that looks like a button.
Disabled
Built-in disabled styling drops opacity to 40% and blocks pointer events.