Skip to main content
On this page

Chip

Represent a selected or applied value that can be removed.

When to use​

  • To display a selected value from a multi-select input, such as a chosen filter or a tag applied by the user, alongside a way to remove it
  • To show applied filters in a filter row where each item can be dismissed individually

When not to use​

  • For read-only labels or status tags - use Badge instead. Chip always includes a remove button; if the value cannot be removed, it is not a Chip.
  • For selectable options in a form - use Checkbox for multi-select or Radio for single-select. Chip is for representing values that have already been chosen, not for making the choice.
  • For primary actions or navigation - use CTA Button or Text Link instead.

Anatomy​

  1. Label
  2. Remove button
  3. Tooltip (appears automatically when the label is truncated, or when a custom tooltip is provided)

Basic usage​

Loading...
Edit live code
  <Chip>Removable chip</Chip>

Variants and features​

Removable​

Every Chip includes a remove button. The onRemove callback fires when the button is clicked or when the user presses Enter or Space on it.

Loading...
Edit live code
() => { // ignore - for live code example only.
  const Example = () => {
    const [filters, setFilters] = useState(['Electricity', 'Gas', 'EV owner']);

    return (
      <Cluster spaceBetween={2}>
        {filters.map(filter => (
          <ClusterItem key={filter}>
            <Chip onRemove={() => setFilters(filters.filter(f => f !== filter))}>
              {filter}
            </Chip>
          </ClusterItem>
        ))}
      </Cluster>
    );
  }

  return <Example />;
}

Truncation and tooltip​

Chip has a maximum width of 20rem. Labels that exceed this width are truncated with an ellipsis. When truncation occurs, hovering or focusing the remove button shows the full label text in a tooltip automatically. No additional configuration is needed.

Loading...
Edit live code
  <Chip>This chip has a very long label so it will be truncated</Chip>

If you want to show custom tooltip content regardless of truncation, use the tooltip prop. This is useful when the label is an acronym or abbreviated form.

Loading...
Edit live code
  <Chip tooltip='Meter Serial Number'>MSN</Chip>

Content​

Keep chip labels short, ideally one to three words. Write them in sentence case. If using an acronym, provide the expanded form in the tooltip prop so screen reader users and users unfamiliar with the acronym can understand the full meaning.