buttons

One default. Three variants. A page should have at most one primary; everything else is a btn or a ghost. If the page calls for two primary actions, the page is wrong.

variants

<button class="btn">default</button>
<button class="btn primary">primary</button>
<button class="btn ghost">ghost</button>
<button class="btn danger">danger</button>
<button class="btn" disabled>disabled</button>

links that act like buttons

Use an anchor when the action is navigation; only use a button when the action is, well, an action. The brand prefers an underlined link to a styled anchor — let the verb do the work.

<a class="link" href="#">read the docs</a>
<a class="btn" href="#">view source</a>

css

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: var(--t-2);
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--fg);
  cursor: pointer;
}
.btn:hover { border-color: var(--fg-muted); }
.btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.btn.primary { background: var(--mark); color: var(--bg); border-color: var(--mark); }
.btn.ghost   { background: transparent; color: var(--fg-muted); }
.btn.danger  { color: var(--hot); border-color: var(--hot-soft); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }