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

Chips

The chip is a compact element that contains simple information elements : label, picture, pictogram.

Usage

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

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.

Back to top