Button width styles

Fixed to label copy

Buttons hug their content by default and auto-resize around the label copy.

Don’t change the button padding

Don't add extra space to the label copy on the button when the width is fixed to the content.

Filling a container

Buttons can fill any container width. This is common on mobile devices where there's a shorter overall viewport or where buttons are stacked to make buttons visually consistent.

Alignment of content

Buttons with both icons and text can be aligned in three ways. We should pick one per page or view to make sure they’re consistent and clear.

Alignment	Supported
Centred	Leading icon + label
Left	Leading icon + label
Justified	Label + trailing icon

We don’t support any other arrangement of leading or trailing icons within buttons filling a container

Icons and accessories

Leading icons are used before button copy and trailing accessories are used after. Buttons don’t always need an icon or accessory but they often add clarity for the traveller.

Leading icons

Leading icons can visually represent a button’s action to lessen the cognitive load for travellers. For instance, a bell icon may symbolise setting up notifications or alerts.

Trailing accessories

Trailing icons should be used in specific use cases as a nod to the interaction. Some examples are:

arrows or chevrons denoting previous or next actions

menu buttons where we use chevrons as a drop-down

These should be used more sparingly in left-to-right languages.

Leading icons appear on the right in right-to-left text languages.

Using arrows

Arrows on buttons symbolise an action the user may not expect such as leaving the product to a 3rd party site. All other buttons indicate progress simply by being buttons, so there’s no need to emphasise them more by adding right-pointing arrows.

Back and next button icons

In this case, the arrows add visual clarity that can help reduce cognitive load.

Icon-only buttons

Icon-only buttons can be used when you need to save space.

Keep accessibility and localisation in mind – only some icons are universally understood. For example, a magnifying glass for “search,” or the plus symbol for “add”. Most icons are abstract to groups of users, so it’s best to support with copy where possible.

Content guidelines

Language usage on labels

When writing label copy aim to use a verb that describes the action. For loose guidance, the verb prefix should change according to where you are in the journey and the traveller's mindset.

Where	What you might use
Top of funnel, marketing or brand entry points	Explore, Discover, Go
Entry searches and results	Search, Find, View
Bottom of the funnel	Book, Pay

Contextualise the action the user is taking, e.g. "Turn on alerts"

Lead with a verb to encourage action

Try to keep the copy under 3 words to be mindful of localisation

Write in sentence case unless there's a proper noun

Don't

Use ambiguous wording or overly creative content as they may not be accessible

Use expressions like “please” and “thank you.” It's for the user to decide if they're polite or not

Use non-specific phrases like “learn more” or “click here”

Repeat button labels within the same interface (like “View” numerous times in a row)

Capitalisation

Always write in sentence case. Sentence case is accessible and scannable, so ignore design guidelines of other operating systems if they tell you to write in block capitals.