Standard
Two color variants across all interaction states
<button class="nds-chip nds-primary nds-rounded">
<span class="nds-label">Label</span>
</button>
With Icons
Leading and trailing icons are positioned with nds-lead-icon or nds-trail-icon on the chip
<!-- Leading icon -->
<button class="nds-chip nds-primary nds-rounded nds-lead-icon">
<i class="hgi hgi-stroke hgi-add-01"></i>
<span class="nds-label">Lead Icon</span>
</button>
<!-- Trailing icon -->
<button class="nds-chip nds-neutral nds-rounded nds-trail-icon">
<span class="nds-label">Trail Icon</span>
<i class="hgi hgi-stroke hgi-add-01"></i>
</button>
Chip Group
Wrap multiple chips for consistent spacing and flow layout
<div class="nds-chips">
<button class="nds-chip nds-primary nds-rounded" data-state="selected">
<span class="nds-label">All</span>
</button>
<button class="nds-chip nds-neutral nds-rounded">
<span class="nds-label">Category A</span>
</button>
<button class="nds-chip nds-neutral nds-rounded">
<span class="nds-label">Category B</span>
</button>
</div>
Built-in Features
Pure CSS
No JavaScript required. All variants, sizes, and states render from HTML markup.
Interactive States
Hover, pressed, selected, focused, and disabled with focus-visible ring.
Label Truncation
Labels auto-truncate with ellipsis, configurable via --truncate.
Composable
Combine with icons, rounded shape, on-color variant, and chip groups.
Usage Guidelines
Best Practices
- Use chips for interactive selections like filters, categories, and multi-select options
- Use primary for emphasis and neutral for standard options. Selected state is handled by the selected class
- For non-interactive labels and metadata display, use tags instead
- Group related chips together for filter bars, category selectors, and multi-select inputs
- Add leading icons when the chip represents a category with a recognizable symbol
Modifier Classes
nds-green is an alias for nds-primary, and nds-gray is an alias for nds-neutral.
| Class | Description |
|---|---|
nds-primary | Primary (green) color variant |
nds-green | Alias for nds-primary |
nds-neutral | Neutral (gray) color variant |
nds-gray | Alias for nds-neutral |
nds-rounded | Fully rounded pill shape (border-radius: 999px) |
nds-oncolor | On-color variant for use on dark or brand-colored backgrounds |
nds-sm | Small size, 20px height |
nds-md | Medium size, 24px height (default) |
nds-lg | Large size, 32px height |
nds-lead-icon | Apply to the chip when the first child is an icon; adds inline spacing after the icon |
nds-trail-icon | Apply to the chip when the last child is an icon; adds inline spacing before the icon |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--chip-bg | --chip-background-neutral-default | Background color of the chip |
--chip-text | --chip-text-neutral-default | Text color of the chip |
--chip-icon | Inherits --chip-text | Icon color inside the chip |
--chip-size | 24px | Height of the chip (overridden by size modifiers) |
--truncate | 1 | Number of lines before label text truncates with ellipsis |