Buttons
Five semantic variants, two size modifiers, and disabled state. All button styles use the base
.btn class combined with a variant modifier.
Source file: styles/components/button.css
Variants
Each variant communicates a distinct intent. Choose based on the action's weight and context — use one primary button per distinct action group.
.btn.btn-primary — Filled accent background. Use for the single highest-priority
action on a surface: save, submit, confirm.
.btn.btn-secondary — Outlined surface. Use for secondary confirmations, toggle
actions, and standard navigation triggers.
.btn.btn-ghost — No border or background until hover. Use for low-emphasis actions
in toolbars, inline controls, and icon-only scenarios.
.btn.btn-danger — Destructive red fill. Use only for irreversible or high-consequence
actions: delete, remove, revoke.
.btn.btn-neutral — Muted surface with no color emphasis. Use for cancel, dismiss,
and actions with no strong directional signal.
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-ghost" type="button">Ghost</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-neutral" type="button">Neutral</button>Row View
All five variants at a glance.
Compact Size
Add .btn-sm to reduce padding and font size. Works with any variant. Use in dense
layouts, toolbars, and inline action rows.
<button class="btn btn-primary btn-sm" type="button">Small Primary</button>
<button class="btn btn-secondary btn-sm" type="button">Small Secondary</button>Disabled State
Apply the native disabled attribute. The browser handles pointer-events and
keyboard exclusion. The theme reduces opacity to signal the inactive state.
<button class="btn btn-primary" type="button" disabled>Disabled</button>Full Width
Buttons size to content by default. To stretch to the container width, set
style="width: 100%" or a utility class in your own CSS. Useful in modals,
mobile layouts, and stacked CTA sections.
<button class="btn btn-primary" type="button" style="width: 100%;">
Full-width Primary
</button>Button as Link
Apply button classes to an <a> element when the action navigates rather than
submitting a form. Visually identical — semantics match the actual behavior.
<a class="btn btn-primary" href="/destination">Go to destination</a>Semantic Tonal Variants
.btn-success and .btn-warning use tonal color fills drawn from the
semantic color tokens. Use sparingly — they carry strong directional signal.
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>Link Button
.btn-link renders as an inline-flow anchor-style control — no padding, no background,
just accent-colored underlined text. Use for inline contextual actions like "view details",
"load more", or "see charges". Does not inherit the base .btn shape or min-height.
<button class="btn-link" type="button">view all charges</button>Pill Control — .btn-pill
Compact muted pill for low-emphasis UI chrome controls: theme toggles, view mode switches,
print triggers. No action affordance — keeps chrome utilities visually subordinate to primary
actions. Does not inherit .btn shape or min-height.
<button class="btn-pill" type="button">☀ Light</button>
<button class="btn-pill" type="button">⊞ Detailed</button>
<button class="btn-pill" type="button">⎙ Print</button>