Card button

Found flights you like? The card button lets travellers share flights or save them for later.

Card Button Start
Card Button Styles


Card Button Anatomy

Backpack icon

This part of the card button is a Backpack icon that represents the action triggered upon interaction.

Card Button Anatomy 2

Hit area

The hit area is the surrounding area of the card button.

Container (optional)

The optional container is a semi-transparent circular shape behind the icon.


There are currently 2 types of card buttons with corresponding actions.


The save card button allows users to save flights, hotels and car hire deals.


The share card button lets users share flights, hotels and car hire deals.

Share button

Share button



The default size is 24px. This card button suits most use cases on inventory cards or pages.


The smaller size card button is 16px. Use this size on smaller inventory cards where space is limited.

Card Button Sizes
Size Defaultand Small



The 'default' style is a Backpack icon and is designed for most use cases.


The 'contained' style has a semi-transparent colour around the icon. Use this style if the image it’s placed on causes contrast issues with the default card button.

On dark

The 'on dark' style is for when the icon is placed on a dark background or over an image where there is sufficient contrast.

Card Button Styles



The default state is the resting state of the card button that hasn’t been interacted with.


The hover state shows when a user hovers over the card button.

Transition (for save card button)

The transition state displays a pulsating animation that’s triggered when a user interacts with the card button.

Saved (for save card button)

The saved state is for when an item is saved.


The removed state is used when a saved item has been removed from the saved items list. It appears as though it hasn’t been interacted with similar to the default state.

Card Button States

Card button spacing

There is set guidance around spacing for when card buttons are next to one another. The spacing between the buttons changes depending on which style is used.

Use the lockup component to keep designs consistent.

Card Button Lockup