Chip
A Chip is a small toggle affordance used to select or deselect a single option. It's presentation-only — the component has no opinion on what selecting it means (filtering a list, applying a tag, choosing an option). That decision belongs to the consuming app.
Overview
When to use
- To let users toggle a single option on or off inline with other content (e.g. a sort or display preference, a tag).
- Anywhere a compact, button-like toggle is preferable to a Checkbox.
When not to use
- For navigation or triggering an immediate one-off action — use a Button.
- For selecting exactly one option out of several mutually exclusive ones — use a Select or radio group.
States
Unselected — default appearance, primary button styling.
Selected — accent button styling, aria-pressed="true".
Controls
Interactive controls are available in Storybook. Open Storybook
Props
Token mapping
Chip is a thin wrapper around Button and inherits its primary/accent token mapping directly — see the Button documentation for the full bevel and color token breakdown.
Do's and don'ts
Do
- Use
isSelectedto reflect whether the chip's underlying option is currently applied. - Let the parent decide what selecting a chip does — filtering, tagging, or any other toggle.
Don't
- Bake filter-specific behavior or labels into the component — that logic belongs to the app using it.
- Use a Chip where a Checkbox would be clearer (e.g. long option lists, forms).
Changelog
| Date | Change |
|---|---|
| 2026-07-18 | Renamed from FilterChip to Chip; renamed active prop to isSelected; removed dead unused CSS file; added className passthrough, index.ts, stories, and documentation |
| 2026-03-15 | Initial component created as FilterChip |