Chip

A removable tag. For a non-removable label, use Badge instead — Chip's whole reason to exist is the onRemove callback and its button.

<Chip>
  ...
</Chip>

Examples

removeLabel is required whenever onRemove is passed — it's the accessible name for the remove button, since "Remove" alone wouldn't say what it removes to someone using a screen reader:

<Row gap="8">
  {selectedTags.map((tag) => (
    <Chip key={tag} onRemove={() => removeTag(tag)} removeLabel={`Remove ${tag}`}>
      {tag}
    </Chip>
  ))}
</Row>

Omit onRemove entirely for a tag that reads as removable-in-general (a filter list) but isn't, in a particular instance — TypeScript enforces removeLabel and onRemove come as a pair, so there's no way to render the button without the label.

Props