<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">Gaming</span>
{{#if items}}
<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
{{#each items}}
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">{{this}}</span>
{{/each}}
</div>
{{else}}
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">{{label}}</span>
{{/if}}
{
"label": "Gaming",
"items": null
}
Rounded-full pill for curated labels (e.g. auto-tagged topics on a video card, applied filters). Uses the component tint (#efedf7) signed off 2026-07-23, not the page tint (#F2EEF8), so it reads as a distinct element sitting on the page background.
Distinct from Badge’s topic tag: Badge’s topic tag is user-facing and clickable, Chip is a passive, applied label.
Row rule: any flex container holding chips (or pills) must set align-items:center explicitly. The default stretch inflates the shorter chips to the height of the tallest sibling in the row, this is what the “row” variant below demonstrates.