Variants
Primary
Main actions, CTAs. Uses accent color.
btn btn-primarySecondary
Secondary actions. Outlined style.
btn btn-secondaryGhost
Minimal emphasis. No border or background.
btn btn-ghostAccent Outline
Accent-colored border and text.
btn btn-accent-outlineIcon Buttons
SM
Default
LG
Hero Buttons (On Dark Background)
Used in Hero sections with inline Tailwind classes (uppercase, tracking-widest)
Section Buttons (TwoTab, Content)
Used in TwoTab and content sections (uppercase, tracking-widest)
Usage
/* CSS class buttons (CTA sections, simple pages) */
<a className="btn btn-primary">Primary</a>
<a className="btn btn-secondary">Secondary</a>
<a className="btn btn-ghost">Ghost</a>
<a className="btn btn-primary btn-sm">Small Primary</a>
<a className="btn btn-primary btn-lg">Large Primary</a>
<button className="btn btn-icon btn-secondary"><Icon /></button>
/* Inline Tailwind buttons (Heroes, TwoTabs) */
<a className="inline-flex items-center justify-center px-6 md:px-8 py-3 md:py-4
bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white
font-semibold text-xs md:text-sm uppercase tracking-widest rounded transition-colors">
CTA Text
</a>