◆ Components · Buttons · v3.0
Buttons — 6 variants × 6 sizes × 7 states
Primary · Secondary · Ghost · Link · Danger · Success
XS → 2XL · Focus · Loading · Disabled · Pressed · Magnetic
01HERO BUTTON · the signature CTA
magnetic glow · sweep · scanline
HALO · 1 px lime + 50 px glow
PULSE · 2.4 s ease loop
SWEEP · 3.2 s · 60% white shimmer
CONTRAST · 13.2 : 1 AAA
02ANATOMY · 4× callouts
primary button, exploded
ICON · ◆ 12 px · optional LABEL · Mono · 11 · 700 · +0.16em PADDING · 12 / 20 · rad 8 FILL · brand-500 + shimmer
03VARIANTS × STATES · 6 × 7
42 cells · production grid
VARIANT
DEFAULT
HOVER
FOCUS
ACTIVE
LOADING
DISABLED
SUCCESS
PRIMARYsolid lime★ default CTA
SECONDARYglass + border
GHOSTno chrome
LINKinline text
DANGERdestructive
SUCCESSaffirmative
04SIZE LADDER · 6 stops
XS 28 px → 2XL 64 px
BTN-XS
28 h · pad 6/12 · rad 6 · 9 px
BTN-SM
34 h · pad 9/16 · rad 7 · 10 px
BTN-MD
42 h · pad 12/20 · rad 8 · 11 px · default
BTN-LG
52 h · pad 16/26 · rad 10 · 12 px
BTN-XL
58 h · pad 18/32 · rad 10 · 13 px
BTN-2XL
66 h · pad 22/40 · rad 12 · 14 px
05COMPOSITIONS · group · split · icon · pair · toolbar
8 production patterns
◆ SEGMENTED GROUPfilter · single-select
Selected fills brand-500, void text. Group inherits glass.
◆ SPLIT BUTTON
Primary action + dropdown variants.
◆ ICON-ONLY · 40
aria-label required.
◆ HERO PAIR
Primary leads · arrow on principal.
◆ CALL-CONTROL PAIR
Affirmative green · destructive red.
◆ AI ACCENT
Violet reserved for AI & premium.
◆ TOOLBAR ROW
Ghost SM · dividers at logical breaks.
◆ INLINE LINKS · running prose12 / 1.55 · Inter
MobDial routes through with sub-100ms failover. Read the or jump to . For destructive flows, use the explicit action — never a bare button.
06USAGE · code reference
copy-paste tokens · React + CSS
  Button.tsx
// MobDial · Primary CTA
<Button variant="primary" size="md">
  Answer call
</Button>
  tokens.css
.btn-pri {
  background: linear-gradient(180deg,#4DFFB8,#12FFA0);
  color: #05060A;
  box-shadow: 0 6px 20px -6px rgba(18,255,160,.6);
}
07RULES · do & don't
buttons that respect the operator
◆ DO5 RULES
01One primary per surface. Every screen points the eye at exactly one decisive action. Everything else is secondary or ghost.
02Verbs, not nouns. Labels read as commands: "Start call", "Save draft", "Delete record" — not "OK" or "Submit".
03Loading reserves width. Lock the button width on loading state so the layout doesn't jump.
04Destructive gets confirmation. Danger pairs with a confirm step — never a naked single-click delete.
05Hit target ≥ 44 × 44. Below MD, only inside dense toolbars without mobile touch.
◆ DON'T5 RULES
01No two primaries side-by-side. If both feel primary, the page hasn't decided what it wants the user to do.
02No icon-only without aria-label. A bare ⋯ is invisible to screen readers.
03No rounded-pill on MD+ buttons. Pill on large buttons reads toy; cap at rad-sm 8 (rad-md 10 for LG/XL).
04No disabled without reason. Always include tooltip or inline copy explaining the gate.
05No spinner-as-feedback-only. Loading lives ≤ 1.5 s; longer needs a progress meter or cancel.
08TOKEN REFERENCE · 12 tokens
drop-in CSS variables
HEIGHTdefault42 px
RADIUSdefaultrad-sm 8
FONTlabelMono 700 · +0.16em
SHADOWrestshad-2 + glow
FOCUSring4 px · brand/32
TRANSITIONpresstranslateY 1 · 150ms
HITmin44 × 44
GAPicon/labelsp-2 · 8 px
LOADINGspinner12 px · 0.7s
DISABLEDopacity0.30
SHIMMERsweep.6s on hover
HEROpulse2.4s loop