Pill
Pills are rounded, bordered badges used for announcements, promos, or standalone status
callouts — typically 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 →”).
Basic usage
Section titled “Basic usage”<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>Live example
Section titled “Live example”New Standalone pill
New Link pill
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>