Tag
Inline chip elements for categorization and filtering. Optionally closable.
Default
DEFAULT
CYBERPUNK
<span class="nf-tag">CYBERPUNK</span>Color variants
PRIMARY / SECONDARY / TERTIARY
NETFRAMECRITICALSYSTEM
<span class="nf-tag nf-tag-primary">NETFRAME</span>
<span class="nf-tag nf-tag-secondary">CRITICAL</span>
<span class="nf-tag nf-tag-tertiary">SYSTEM</span>With close button
CLOSABLE TAGS
UPLINK
ICE_CORE
NODE_047
<span class="nf-tag nf-tag-primary">
UPLINK
<button class="nf-tag-close" aria-label="Remove UPLINK tag"></button>
</span>
<span class="nf-tag nf-tag-secondary">
ICE_CORE
<button class="nf-tag-close" aria-label="Remove ICE_CORE tag"></button>
</span>
<span class="nf-tag">
NODE_047
<button class="nf-tag-close" aria-label="Remove NODE_047 tag"></button>
</span>Tag list
TAG GROUP
CSSCYBERPUNKDESIGN_SYSTEMUIOPEN_SOURCE
<div style="display: flex; flex-wrap: wrap; gap: var(--nf-space-2);">
<span class="nf-tag nf-tag-primary">CSS</span>
<span class="nf-tag nf-tag-primary">CYBERPUNK</span>
<span class="nf-tag">DESIGN_SYSTEM</span>
<span class="nf-tag">UI</span>
<span class="nf-tag nf-tag-tertiary">OPEN_SOURCE</span>
</div>Class reference
| Class | Description |
|---|---|
nf-tag |
Base chip — neutral border and background |
nf-tag-primary |
Primary green tint + border |
nf-tag-secondary |
Secondary magenta tint + border |
nf-tag-tertiary |
Tertiary purple tint + border |
nf-tag-close |
× button inside the tag — renders via ::before |