CASEWORK
COMPONENTS / BUTTON

Button

Single action trigger. Three variants ordered by emphasis: primary (one per view), secondary, ghost. All variants share one box model; only surface treatment changes.

VERSION1.0.0
TOKENS11 CONSUMED
CONTRASTAA / AAA
DEPENDENCIESNONE
01 / LIVE INSTANCES — ALL STATES
HOVER / FOCUS / ACTIVE FORCED FOR SPECIMEN
VARIANT
DEFAULT
HOVER
FOCUS-VISIBLE
ACTIVE
DISABLED
LOADING
PRIMARY
SECONDARY
GHOST
N/A — GHOST NEVER BLOCKS
ERROR / EMPTY: NOT APPLICABLE TO BUTTON — SEE INPUT AND TABLE ANATOMY PAGES.
02 / ANATOMY — EXPLODED VIEW
01 FOCUS RING
2PX --accent · OFFSET 2PX
02 CONTAINER
FILL --fg / --bg PAIR · --r1
03 LABEL
--font-mono · --t1 · TRACK .08EM
DEPLOY
04 PADDING
--s2 BLOCK · --s4 INLINE
FIG. B-01 — LAYERS SEPARATED FOR INSPECTION. ASSEMBLED HEIGHT: 36PX.
03 / TOKENS CONSUMED
PROPERTYTOKENVALUE
FONT--font-monoJETBRAINS MONO
SIZE--t112PX
PADDING BLOCK--s28PX
PADDING INLINE--s416PX
RADIUS--r12PX
FILL / PRIMARY--fg → --bgINVERTED PAIR
BORDER / SECONDARY--line-strong1PX
HOVER--accent#EF4E0B
ACTIVE--accent-ink#BF3D06
DURATION--d1 / --ease120MS
FOCUS RING--accent2PX / OFFSET 2PX
04 / CODE — COPY-READY
<button class="btn btn--primary">DEPLOY</button>
<button class="btn btn--secondary">INSPECT</button>
<button class="btn btn--ghost">CANCEL</button>
<button class="btn btn--primary" aria-busy="true">
  <span class="spin"></span>DEPLOY
</button>

/* CSS — components.css / BUTTON */
.btn {
  font: 500 var(--t1)/1 var(--font-mono);
  letter-spacing: .08em;
  padding: var(--s2) var(--s4);
  border-radius: var(--r1);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--d1) var(--ease);
}
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover  { background: var(--accent); }
.btn--primary:active { background: var(--accent-ink); }
.btn--secondary { border-color: var(--line-strong); background: none; }
.btn--ghost { color: var(--fg-muted); background: none; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
05 / RESPONSIVE BEHAVIOUR
≥1024INLINE, AUTO WIDTH. GROUPS FLEX + GAP --s3.
640–1023UNCHANGED. GROUPS MAY WRAP; PRIMARY STAYS FIRST.
<640FULL-WIDTH BLOCK. MIN HIT TARGET 44PX — PADDING BLOCK STEPS TO --s3.
06 / ACCESSIBILITY
ELEMENTNATIVE <BUTTON>. NO ROLE OVERRIDE NEEDED.
ARIAARIA-BUSY="TRUE" WHILE LOADING; ARIA-DISABLED NEVER — USE DISABLED.
FOCUSIN DOM ORDER. RING ON :FOCUS-VISIBLE ONLY. NEVER OUTLINE:NONE.
CONTRASTPRIMARY 18.2:1 AAA · SECONDARY 18.2:1 AAA · ACCENT ON BG 3.5:1 — UI/LARGE ONLY