Kairoz
.kairoz-btn-pill

Pill button

Fully rounded button variant for landing pages and marketing surfaces. Monochromatic, same height as .kairoz-btn, with 9999px border-radius.

.kairoz-btn-pill.kairoz-btn-pill-primary.kairoz-btn-pill-secondary.kairoz-btn-pill-ghost.kairoz-btn-pill-sm.kairoz-btn-pill-lg

Primary

<button class="kairoz-btn-pill kairoz-btn-pill-primary">Get started</button>

Variants

Primary
Secondary
Ghost
Small
Large
With icon

Squared vs rounded

Use squared buttons in dense app UIs and pill buttons on landing pages and outward-facing surfaces.

<div style="display:flex;gap:12px;align-items:center">
  <button class="kairoz-btn kairoz-btn-primary">.kairoz-btn</button>
  <button class="kairoz-btn-pill kairoz-btn-pill-primary">.kairoz-btn-pill</button>
</div>