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

<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>

Live example

DefaultSecondarySuccessWarningDangerInfo