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)}}

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