Pill
Pills are rounded, bordered badges used for announcements, promos, or standalone status
callouts — optionally paired with a short tag and a link. Unlike af-badge and af-chip,
which are meant to sit inline with text, a pill is a self-contained unit often used as a
link (e.g. “New: Feature name →”). Corners use --af-pill-radius (a capsule), not --af-radius.
Basic usage
Section titled “Basic usage”
Standalone pill
Link pill
<span class="af-pill">Standalone pill</span>
<a href="#" class="af-pill">
Link pill
<span aria-hidden="true">→</span>
</a>With a tag
Section titled “With a tag”Wrap a short label in af-pill__tag for a nested status capsule on the leading edge.
New
Standalone pill
New
Link pill
<span class="af-pill">
<span class="af-pill__tag">New</span>
Standalone pill
</span>
<a href="#" class="af-pill">
<span class="af-pill__tag">New</span>
Link pill
<span aria-hidden="true">→</span>
</a>On primary backgrounds
Section titled “On primary backgrounds”Add af-is-on-primary when placing a pill on a brand-color or gradient background (for
example, a hero section). It swaps to translucent, on-primary-safe colors instead of the
default surface/border tokens.
<a href="#" class="af-pill af-is-on-primary">
<span class="af-pill__tag">New</span>
Built for AI-assisted workflows
<span aria-hidden="true">→</span>
</a>