Badge

Badges are small status indicators, typically used for counts, labels, or status.

Intent variants use a soft background with hard text (--af-color-*-soft + --af-color-*-hard) so label-sized type meets WCAG AA contrast. Mid-tone intent colors are reserved for fills and accents, not badge text.

Basic usage

Default Secondary Success Warning Danger Info

<span class="af-badge">Default</span>
<span class="af-badge af-is-secondary">Secondary</span>
<span class="af-badge af-is-success">Success</span>
<span class="af-badge af-is-warning">Warning</span>
<span class="af-badge af-is-danger">Danger</span>
<span class="af-badge af-is-info">Info</span>