67Tag & pill

A tag names a taxonomy — topic, level, lesson type — in the mono label voice with a hairline border. The pill SHAPE is reserved for true pills (filters, counts); the default tag stays sharp (Principle 4).

Use it for

Topics and levels on cards and pages
Filter rows — aria-pressed marks the active tag
Counts — the pill form with a mono count

Not for

Status — that is Status (dot + text), never a tag
Actions — a tag that performs an action is a Button

Tags

Apex Beginner Flow

markup

<span class="ns-tag">Apex</span>
<span class="ns-tag"><i class="ph ph-graduation-cap" aria-hidden="true"></i> Beginner</span>
<span class="ns-tag">Flow</span>

Filter row

Real buttons; the pressed one wears the brand border.

markup

<button class="ns-tag" aria-pressed="true">All</button>
<button class="ns-tag" aria-pressed="false">Admin</button>
<button class="ns-tag" aria-pressed="false">Developer</button>

Pills

The pill radius is earned by being a true pill — counts and filters.

Apex 24 Flows 11

markup

<span class="ns-tag ns-tag--pill">Apex <span class="ns-tag__count">24</span></span>
<span class="ns-tag ns-tag--pill">Flows <span class="ns-tag__count">11</span></span>

Removable

Apex SOQL

markup

<span class="ns-tag">Apex <button class="ns-tag__x" aria-label="Remove Apex"><i class="ph ph-x" aria-hidden="true"></i></button></span>
<span class="ns-tag">SOQL <button class="ns-tag__x" aria-label="Remove SOQL"><i class="ph ph-x" aria-hidden="true"></i></button></span>

Accessibility contract

Filter tags are real buttons with aria-pressed
Removable tags name their target: aria-label="Remove Apex"