Chip

General guidelines

A chip represents only one element, only one option : input information, state or actions.

It always contains a text label, also named “tag”.

Prefer clear and short labels.

Readonly chip

Use readonly chips for non-interactive elements.You can add an icon on the left to clarify the category.

Chips can:

• highlight categories of the content displayed (e.g.: tag on a card)
• feature contextual information (e.g.: a promotion in a editorial page)
• show the state of an element (e.g.: in progress, canceled, etc.)

Removable chip

Use removable chips for interactive elements, to give the user the option of deleting the element. It will help the user to:

• Enter information (e.g.: after a search/query).
• Filter or select content (e.g.: via a combobox to filter a list)

Use the combo box container 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 (incremental chip). When clicked, it drops down to show the entire list. 

Selection chip

Use selection chips to give the user the select or deselect an element.  

Selection chip

Use selection chips to give the user the select or deselect an element.  

Behaviours

Removable chips have four possible states : default, hover, active and disable. 

Selection chips have two states: selected and unselected.

Readonly chips only have one default state. 

Style

Use the cool grey 20 (E0E3E9) by default for the chip’s background, in order to make them stand out from the inputs’ background. 

The embedded text or digital content will define the size of the container.

For readonly chips, you may use different backgrounds, considering our accessibility standards. Use an appropriate color that is connected to the description and context of the flag. The colors should be accessible : therefore, you can use white or black text.