Section 08 · Components

Buttons.

Four variants. Three sizes. One destructive flavour. That's the whole inventory — anything else is a link, an icon button, or a misuse of attention.

Variants

primaryneon fill · dark label · glow shadow one per visible region

ghosttransparent · line-2 border · fg label secondary actions

linkno border · no fill · fg-dim → fg on hover cancel · close · tertiary

destructivetransparent · danger border + label delete · disconnect · revoke

One primary per region. A region is a card, a modal, a panel, an empty state. The hero CTA is primary; the "Read the docs" beside it is ghost. Two primaries side-by-side never.

Sizes

sm: dense toolbars · table row actions
md: default · forms · CTAs
lg: empty-state primary action · website hero

Icon buttons

Square, equal padding, 32px / 36px / 40px. Always a title or aria-label.

States

Hover: primary lightens to lime; ghost darkens to --vp-color-bg-2; link gains underline.
Focus: system focus ring (see Accessibility).
Disabled: --vp-color-bg-3 + --vp-color-fg-faint. Never grey out the neon — that says "broken," not "not yet."
Loading: swap label to verb-in-progress ("Sending…"), prefix a spinner glyph, keep button width — never collapse the button.

Do / Don't

● Do

One primary, one ghost. Clear hierarchy of consequence.

● Don't

Two primaries make both feel mandatory. Decision paralysis.

● Do

Destructive is ghost-shaped — not red-filled. Filling it makes accidental clicks twice as costly.

● Don't

Red fill draws the eye. Reserve red for "this happened" not "do this."

Spec

button.css.btn-primary {
  background: var(--vp-color-neon);
  color: "#06140d";
  border: 1px solid var(--vp-color-neon);
  border-radius: var(--vp-radius-md);
  padding: 9px 16px;
  font: 600 13.5px/1 var(--vp-font-body);
  box-shadow: 0 0 0 1px var(--vp-color-neon), 0 6px 20px -6px var(--vp-color-neon-glow);
  transition: background var(--vp-dur-fast) var(--vp-ease-standard);
}
.btn-primary:hover { background: var(--vp-color-neon-lime); }
.btn-ghost {
  background: transparent;
  color: var(--vp-color-fg);
  border: 1px solid var(--vp-color-line-2);
}
.btn-ghost:hover { background: var(--vp-color-bg-2); }