Icon Button

Icon-only buttons for compact actions. Default size matches the hit target (--af-btn-icon-button-size, 2.75rem).

<button class="af-btn af-btn-icon" aria-label="Settings">
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <!-- SVG path -->
  </svg>
</button>

Sizes

Use af-is-xs / af-is-sm / af-is-lg / af-is-xl the same as text buttons:

<button class="af-btn af-btn-icon af-is-xs" aria-label="Add">…</button>
<button class="af-btn af-btn-icon af-is-sm" aria-label="Add">…</button>
<button class="af-btn af-btn-icon" aria-label="Add">…</button>
<button class="af-btn af-btn-icon af-is-lg" aria-label="Add">…</button>
<button class="af-btn af-btn-icon af-is-xl" aria-label="Add">…</button>