Chip

Chips are used for tags, filters, and removable items, with a distinct visual style from badges.

Intent variants use a soft background with hard text (--af-color-*-soft + --af-color-*-hard) so small labels meet WCAG AA contrast, matching badges.

Basic usage

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

Live example

DefaultSecondarySuccessWarningDangerInfo