When to Use
Example: PLP — filter sidebar + Card product grid
- Displaying applied filters that users can toggle on/off (Standard chips)
- Showing removable tags or selections from a multi-select input (Closable chips)
- Compact inline metadata like categories, labels, or attributes
- Not suitable for primary navigation or actions that require a full Button
Usage Guidelines
DO
Use Standard Chips for filtering (multi-select); keep labels short (≤ 3 words)
Don’t
Don't use Chips as navigation elements — use Tabs instead
DO
Use Closable Chips to display selected tags for individual removal; keep close button touch targets ≥ 24 px
Don’t
Don't use Chips for single-select scenarios — use Radio instead
Interaction Behavior
| State | Description |
|---|---|
| Default | Light gray background + border, text color text-secondary |
| Hover | Background slightly darkens |
| Selected (Standard) | default style: black fill; brand style: brand-pink fill, white text |
| Disabled | Gray fill, pointer-events: none |
| Close Button Hover | Close icon opacity increases, indicating clickability |
Accessibility
| Requirement | Implementation |
|---|---|
| Filter chips | role="checkbox" + aria-checked indicating selected state |
| Closable chip container | role="group" + aria-label="Selected: {chip name}" |
| Close button | aria-label="Remove {chip name}" |
| Chip group | role="group" + aria-label describing the group purpose |
| Keyboard navigation | Tab to enter chip, Space/Enter to toggle selection |