Use chips to display input information, state or actions. They can be removable or not, clickable or not.
They always contain text or digital content that define the size of the container.
Use variations
The chip is used to feature contextual information (e.g.: a promotion) or show the state of an element (e.g.: in progress, canceled, etc.)
It may also be used with numerical, to highlight a number (e.g.: number of notifications).
Use chips to highlight categories of the content displayed.
Or to represent an element that has just been selected (e.g.: via a dropdown menu to filter a list) or identified (e.g.: after a search/query). In this case the chip should be removable.
Tags are the data chips contain. This element can be clickable to jump to contents that have the similar caracteristics.
Best practices
Behavior
Chips have three possible states: enabled, hover and disabled.
You can adapt the chips colours to the user's needs.
Variation
The container dropdown allows you to optimize the space taken up by a long list of chips. The container appears as a single line with the first items and a number indicating the total number items. When clicked, it drops down to show the entire list.