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.

Chip01
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.)
Chip02
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. 

Chip03
Selection chip

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

Chip04
Selection chip

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

Chip03
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. 

Chip05

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.

Chip03
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