Components · Buttons

Buttons & Controls

The action vocabulary. One primary per surface; the wing-wipe is the entire hover signal — the border rests unchanged. Label buttons with verbs.

Variants

.across-btn

Primary carries the accent fill; default is the hairline button; ghost drops the border for low-emphasis actions; danger for destructive intent.

HTML
<button class="across-btn across-btn--primary"><i class="ph-light ph-check"></i> Primary</button>
<button class="across-btn">Default</button>
<button class="across-btn across-btn--ghost">Ghost</button>
<button class="across-btn across-btn--danger">Danger</button>

Sizes

.across-btn--sm · .across-btn--lg

Three sizes share one shape. Default (34px) for most surfaces; small for dense toolbars; large for hero CTAs.

HTML
<button class="across-btn across-btn--sm">Small</button>
<button class="across-btn">Medium</button>
<button class="across-btn across-btn--lg">Large</button>

States

.is-loading · :disabled

A loading button shows the in-flight spinner — the one sanctioned motion. Disabled dims and blocks interaction.

HTML
<button class="across-btn across-btn--primary is-loading" disabled>
  <span class="across-btn__spinner"></span> Saving…
</button>
<button class="across-btn" disabled>Disabled</button>

Icon Buttons

.across-icon-btn

Square buttons for toolbars. The wing-wipe is suppressed (too small to read) — the hover signal is a 2.5% lift. Always give an aria-label.

HTML
<button class="across-icon-btn" aria-label="Settings"><i class="ph-light ph-gear-six"></i></button>
<button class="across-icon-btn across-icon-btn--ghost" aria-label="More">…</button>
<button class="across-icon-btn across-icon-btn--primary" aria-label="Send">…</button>

Button Group

.across-btn-group

Joined controls sharing one border — the seam is the structure, so the wing-wipe is suppressed. The active member carries the accent tint.

HTML
<div class="across-btn-group">
  <button class="across-btn is-active">Day</button>
  <button class="across-btn">Week</button>
  <button class="across-btn">Month</button>
</div>