Tags & chips

Small rounded pills that label things. They look alike on purpose, but they do different jobs: a badge states a fact, a tag links to more.

Badge

Static metadata that is not a link: a technology on a work-experience card, a language on a post. Neutral fill, 8-pixel radius, no hover.

React Native TypeScript Astro

<span class="badge">React Native</span>

Post tag

A taxonomy link, one pixel tighter at the corners than a badge. It greens its border and text on hover because it takes you somewhere; a badge does not.

<a class="post-tag" href="/blog/tags/testing/">Testing</a>

When to use

React Native

Use a badge for a fact that is not clickable.

Don’t

React Native

Style a badge to look tappable when nothing happens on tap.

Testing

Use a post tag when the pill navigates to a filtered list.

Don’t

Testing

Fill a pill with the brand green; the neutral fill is deliberate.

Testing Leadership Hiring

Group related pills with a small, even gap.

Don’t

Testing Leadership Hiring React Native Detox MSW Zod RTK i18n

Crowd a row with so many pills that none can be read.

Where it lives

Badge: .badge (grouped in .badge-group). Post tag: .post-tag (grouped in .post-tags). Both share the neutral --badge-bg / --badge-text pair.

Two cousins complete the pill family: the tag-cloud pill on the browse page, a 44-pixel tap target with a mono label and a tinted count bubble; and the series chip, an art disc beside a label, used by the search palette and the blog’s browse row.