Standard
Two color variants across all interaction states
<button class="nds-chip nds-primary nds-rounded">
<span class="nds-label">Label</span>
</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
When to Use
- 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