Chip

States

Design intent

Chip is the interactive counterpart of Tag. Where Tag labels static taxonomy, Chip acts: it can be toggled, applied as a filter, or used in multi-select groups. Keep chips short and give each group enough context so the selection state is immediately apparent.

Semantic palettes

Categorical palettes

Use these when the selected color identifies a category rather than a status. Useful for filter groups where each chip maps to a distinct topic or type.

When to use

Designer checklist

• Selected state is conveyed by more than color alone (border weight, shape, or icon change).
• Chips in a filter group do not overflow horizontally on small screens without a scroll affordance.
• Each chip label fits on one line at the intended size.

Props

Usage

import { Chip } from '@pierredelattre/source-react';

function Filters({ activeOnly, setActiveOnly }) {
  return (
    <Chip selected={activeOnly} onClick={() => setActiveOnly(!activeOnly)}>
      Active only
    </Chip>
  );
}

Component tokens

Accessibility