Variants
Five color variants with outline, rounded, and icon modifiers
Label
<span class="nds-tag nds-gray">
<span class="nds-label">Label</span>
</span>
Status
Pill-shaped tags with a dot indicator for state representation
Status
<span class="nds-tag" data-status="neutral">
<span class="nds-label">Status</span>
</span>
On Color
Tags designed for use on colored or dark backgrounds
On Color
<span class="nds-tag nds-oncolor">
<span class="nds-label">On Color</span>
</span>
Icon Only
Square tags that display only an icon, hiding the label
<span class="nds-tag nds-gray nds-icon-only">
<i class="hgi hgi-stroke hgi-tag-01"></i>
</span>
Built-in Features
Pure CSS
No JavaScript required. Tags render immediately from HTML markup.
Auto-truncation
Labels truncate to a single line with ellipsis, configurable via --truncate.
Flexible Color API
Set color via class (nds-green) for normal tags, or data-status attribute for status indicators.
Works Anywhere
Drop into any component. Works as labels, badges, status indicators, or metadata display.
Usage Guidelines
When to Use
- Use tags for categorization, labels, and metadata that users need to scan quickly
- Use status tags when the state needs a visual indicator beyond just color (the dot reinforces meaning for colorblind users)
- Choose color by meaning: neutral for general labels, success/error/warning/info for semantic status