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

Default Secondary Success Warning Danger Info

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