Chips

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 

• A chip always represents only one element, only one option.
• Prefer use of clear and short labels.
• When needed, give the option of deleting the chips with a cross-shaped icon (e.g. the user wants to undo his action).
• Use an appropriate color that is connected to the description and context of the flag.