Buttons

Buttons are split into individual pattern pages:

Patterns

• Button: af-btn, af-is-* (ghost, link, sizes, loading spinner), af-w-full
• Button Group: af-btn-group, af-is-vertical
• Icon Button: af-btn-icon
• Link Button: <a class="af-btn">…</a>

Corner radius

Buttons follow --af-btn-radius (defaults to --af-radius, same as cards and inputs). Set --af-btn-radius to --af-pill-radius for pills, or --af-radius-sm for Tailwind-like rounded-md. See Button for variants, sizes, and other tokens.

Save Cancel Outline

<style>
  :root {
    --af-btn-radius: var(--af-pill-radius);
  }
</style>

<div class="af-inline btn-radius-full-demo">
  <button type="button" class="af-btn">Save</button>
  <button type="button" class="af-btn af-is-secondary">Cancel</button>
  <button type="button" class="af-btn af-is-outline">Outline</button>
</div>