component
Chip
also called pill, token
A compact, rounded element holding one value, which can usually be selected, removed, or both.
Chips carry values: a filter you applied, a label on an issue, a recipient in a “To” field. The shape is doing real work, since a rounded outline reads as one object even when the text inside it is a phrase.
The names are a mess and worth knowing. Material says chip, IBM and GitHub say tag, Bootstrap popularised pill for the shape, and “token” is what the same thing is called once it sits inside a text field (the addresses in an email client). They are the same component with different histories, which is why this entry answers to all four.
Against a badge: a badge is stuck onto something else and reports a count or a status, and you cannot click it. If it can be dismissed with an x or toggled on and off, it is a chip.
Which word?
| If you want | say |
|---|---|
| a compact value you can select or remove | chip |
| a count or status stuck to something else | badge |
| a small label that classifies an item | tag |
| a reader types an open ended set of short values | tag input |
| a small block standing in for a colour value | swatch |
Related
See also: Applied filters
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Chips |
| carbon | Tag |
| polaris | Tag |