Buttons

Button component variants and sizes

Primary, secondary, accent, ghost, outline, hero, submit, messenger, and view-all buttons. All sizes and variants used across sections.

Design Structure

.btn — Base button class
.btn-primary, .btn-secondary, .btn-accent — Filled variants
.btn-ghost, .btn-ghost-light, .btn-ghost-dark, .btn-outline — Outline variants
.btn-hero-primary, .btn-hero-secondary — Hero CTAs
.btn-submit, .btn-view-all, .btn-wa, .btn-tg — Action variants
Sizes: .btn-large, .btn-medium, .btn-small

Component overview — Primary, Secondary, Accent (sources 1:1)

Primary

Large — Default

Large — Hover

Medium — Default

Medium — Hover

Small — Default

Small — Hover

Secondary

Large — Default

Large — Hover

Medium — Default

Medium — Hover

Small — Default

Small — Hover

Accent

Large — Default

Large — Hover

Medium — Default

Medium — Hover

Small — Default

Small — Hover

Ghost / Outline

Hero / Submit / Messenger

Include tokens.css and components.css. Use the classes above. Buttons are used in navbar, hero, CTA, sections.