Components / Form & Input / Button

Button stable

Black leads; lines and ghosts support. Hover, disabled and loading states included.

Preview

<button class="btn btn-pri btn-md">Primary</button>
<button class="btn btn-sec btn-md">Secondary</button>
<button class="btn btn-ghost btn-md">Ghost</button>
<button class="btn btn-teal btn-md">Teal</button>
<button class="btn btn-danger btn-md">Delete</button>
<button class="btn btn-pri btn-md" disabled>Disabled</button>
<button class="btn btn-pri btn-md"><span class="spin"></span>Saving…</button>
<button class="btn btn-sec btn-sm">Small</button>
<button class="btn btn-pri btn-lg">Large</button>

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:500;border-radius:var(--k-radius);cursor:pointer;border:1px solid transparent;font-family:var(--k-font);transition:background .13s;white-space:nowrap;text-decoration:none;background:none;color:var(--k-ink)}
.btn:active{transform:translateY(.5px)}
.btn-pri{background:var(--k-ink);color:var(--k-bg)}
.btn-pri:hover{opacity:.88}
.btn-sec{background:var(--k-bg);color:var(--k-ink);border-color:var(--k-line);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.btn-sec:hover{background:var(--k-bg-soft)}
.btn-ghost{background:transparent;color:var(--k-ink-2)}
.btn-ghost:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.btn-danger{background:var(--k-danger);color:var(--k-on-color)}
.btn-teal{background:var(--k-accent);color:var(--k-on-color)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:7px}
.btn-md{height:38px;padding:0 16px;font-size:13.5px}
.btn-lg{height:44px;padding:0 20px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;animation:k-rot .7s linear infinite}
@keyframes k-rot{to{transform:rotate(360deg)}}

Examples

Variants

<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
  <button class="btn btn-pri btn-md">Primary</button>
  <button class="btn btn-sec btn-md">Secondary</button>
  <button class="btn btn-teal btn-md">Accent</button>
  <button class="btn btn-danger btn-md">Delete</button>
  <button class="btn btn-ghost btn-md">Ghost</button>
</div>

Sizes

<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
  <button class="btn btn-pri btn-sm">Small</button>
  <button class="btn btn-pri btn-md">Medium</button>
  <button class="btn btn-pri btn-lg">Large</button>
  <button class="btn btn-sec btn-lg">Large secondary</button>
</div>

With icons

<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
  <button class="btn btn-pri btn-md"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg> Download</button>
  <button class="btn btn-sec btn-md"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New project</button>
  <button class="btn btn-sec btn-md">Continue <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16m-6-6 6 6-6 6"/></svg></button>
  <button class="btn btn-sec btn-md" aria-label="Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h10M17 6h4M3 12h4M11 12h10M3 18h12M19 18h2"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/></svg></button>
  <button class="btn btn-ghost btn-md" aria-label="Close"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
</div>

States

<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
  <button class="btn btn-pri btn-md" disabled>Disabled</button>
  <button class="btn btn-sec btn-md" disabled>Disabled</button>
  <button class="btn btn-pri btn-md">Enabled</button>
</div>

Loading

<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
  <button class="btn btn-pri btn-md" disabled><span class="spin"></span> Saving…</button>
  <button class="btn btn-teal btn-md" disabled><span class="spin"></span> Sending…</button>
</div>

Usage

One primary action per view. Use Secondary for the alternative, Ghost for tertiary actions, Danger only for destructive ones.

Accessibility

Real <button> elements. Disabled uses the disabled attribute, not just styling. The loading state keeps the label text so screen readers still announce the action.

Checkbox / Radio