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 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 in order to make buttons visually consistent.

Alignment of content

Buttons with both icon and text can be aligned three ways. We should pick one per page or view to make sure it’s 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 container

Icons

Icons can be used before copy. These are called leading icons. Buttons don’t always need an icon but they often add clarity for the traveller.

Leading icons

Leading icons are used as a visual representation of a button’s action to lessen cognitive load for travellers. For instance, a bell icon may symbolise setting up notifications or alerts.

Trailing icons

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

Arrows or chevrons denoting previous or next actions.

Menu buttons where we use chevrons as a drop-downs.

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

Use an arrow on a button to symbolise an action the user may not expect, such as leaving the Skyscanner website. All other buttons already 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 a level of 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 a small set of icons are universally understood. For example, a magnifying glass for “search,” or the plus symbol for “add”. The majority of icons are still abstract to users, it’s best to support with copy where possible.

Content guidelines

Writing label copy

This is how we write copy for buttons within the product. We're working on launching a list of standardised buttons, watch this place!

Language for 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 a user action

Try to keep the copy under 3 words (5 at a push) 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”, we need to add clarity

Repeat button labels within the same interface (like “View” numerous times in a row) without making sure the buttons work for screen readers.

Capitalisation

Always write in sentence case. This is when only the first letter is capitalised (unless it’s a proper noun). Sentence case is more accessible and scannable, so ignore design guidelines of other operating systems if they tell you to write in block capitals.