Atlas
.atlas-btn-pill

Pill button

Fully rounded monochromatic button variant. For landing pages, hero CTAs, and outward-facing surfaces where the squared .atlas-btn feels too utilitarian.

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

Primary

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

Variants

Primary
Secondary
Ghost
Small
Large
With icon

Square vs pill — same button, different voice

Use the squared variant inside dense app shells. Use pill on landing / marketing surfaces.

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