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>
Tag Group
Wrap multiple tags in .nds-tags for automatic flex-wrap layout with consistent gap
<div class="nds-tags">
<span class="nds-tag nds-gray"><span class="nds-label">Design</span></span>
<span class="nds-tag nds-blue"><span class="nds-label">Development</span></span>
<span class="nds-tag nds-green"><span class="nds-label">Approved</span></span>
<span class="nds-tag nds-yellow"><span class="nds-label">In Review</span></span>
<span class="nds-tag nds-red"><span class="nds-label">Blocked</span></span>
</div>
Built-in Features
Pure CSS
No JavaScript required. Tags render immediately from HTML markup.
Auto-truncation
Labels are forced to a single line via white-space: nowrap. The tag itself uses min-width: fit-content so it grows to fit its content.
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 (
data-status="critical"is an alias forerror, reserved for system-level alerts)
Modifier Classes
| Class | Description | Combinable with |
|---|---|---|
nds-inverted | Solid filled background using the full-strength color token. Requires a color class or data-status | Color class, data-status, nds-rounded |
nds-outline | Transparent background with full-strength border. Requires a color class or data-status | Color class, data-status, nds-rounded, nds-oncolor |
nds-ghost | Transparent background and border with neutral text. Usable without a color class or status | Color class, data-status, nds-rounded |
nds-rounded | Pill shape via border-radius: 999px | All variants |
nds-icon-only | Square aspect ratio, hides the label, sized to tag height | All variants |
nds-oncolor | White-on-color styling for use on colored or dark backgrounds | nds-outline, nds-rounded |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--tag-bg | --tag-background-neutral-light | Tag background color |
--tag-text | --tag-text-neutral | Label text color |
--tag-border | --tag-border-neutral-light | Border color |
--tag-icon | --tag-icon-neutral | Icon and status dot color |
--tag-height | 32px | Tag height (also drives icon-only width via aspect-ratio) |
--tag-fs | --typo-text-md-FS | Font size |
--tag-padding-inline | --spacing-xl | Horizontal padding |
--tag-dot-size | 10px | Diameter of the status dot indicator |