Chips let travellers enter information, filter options, make choices, and ultimately take action.

Chip Intro 01


There are three types of chips with their own specific uses and behaviours:

Selectable chip

A selectable chip simply let the user choose an option. This has an ‘on’ or ‘off’ state.

Dropdown chip

A dropdown chip open an interface to show value(s) or to make further selections.

Dismissible chip

A dismissable chip displays a choice inputted by the user. The user can choose to remove the filter if they wish.

Chip Types


There are three styles of chips with each having a corresponding surface.


This works in most situations. The chip has no fill, so this works with Surface-Default, and Canvas-Default + Canvas-Contrast options.

On dark

This is a reversed style that works with Surface-Contrast.

On image

This style is to be used over complex surfaces like maps or images.

Chip Styles


Chip Anatomy 01

Leading icon

An optional leading icon can be used if it adds a visual description of the copy on the label.

Chip Leading

Trailing accessory

There are only two trailing icons we support and each is specific to a chip type.

  • Dropdown chip uses a chevron icon.
  • Dismissible chip uses a close icon.
Chip Anatomy 02

States (selectable and dropdown)


This is the resting state of the chip.


This indicates that interaction is available for people using pointer devices.


This is the active or chosen state of the chip.


The disabled state indicates that an action can’t be taken until a previous action is completed.

Chip States

States (dismissible)

Dismissible chips differ in that they have no off-state. The chip is removed, and the screen is refreshed when dismissed.

Chip States Dismissible