In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Chip

A chip is a compact element containing at least a label.

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.

Picture shows the different kind of chips.
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.)
Pictures shows two cards with different types of chips.
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. 

Image shows a combo box with removable chips
Selection chip

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

Image shows an example of use of the selection chips as filters.
Selection chip

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

Image shows a combo box with removable chips
Visual guidelines 

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. 

Image shows the different chips and their interactive states.

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.

Image shows a combo box with removable chips
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top