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.
.btn.btn-primary-neutral / .btn.btn-secondary-neutral — Non-colored
primary and secondary treatments for dense toolbars, command rows, and utility controls.
In dark mode, .btn-primary-neutral renders as a white high-contrast action.
<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>
<button class="btn btn-primary-neutral" type="button">Primary Neutral</button>
<button class="btn btn-secondary-neutral" type="button">Secondary Neutral</button>Row View
All 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>
<button class="btn btn-primary-neutral btn-sm" type="button">Small Primary Neutral</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>Squared Shape — .btn-square
Shape modifier that replaces the default pill radius with --wm-radius-xs (4px).
Combine with any semantic variant for a compact, rectangular button style — useful in dense
control panels and game-style UIs.
<button class="btn btn-primary btn-square" type="button">Start</button>
<button class="btn btn-secondary btn-square" type="button">Next</button>
<button class="btn btn-danger btn-square" type="button">Reset</button>
<!-- Small size -->
<button class="btn btn-primary btn-square btn-sm" type="button">Small</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>