Buttons help our travellers make all kinds of action, from logging in to booking that dream trip.

Button width styles

Fixed to label copy

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

Buttons Default 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.

Buttons Filling Container

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.

Buttons Alignment Dos




Leading icon + label


Leading icon + label


Label + Trailing icon



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.

Buttons Do Leading

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.

Buttons Do Trailing
Buttons Dont Trailing

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.

Buttons without icons

Back and next button icons

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

Buttons Anatomy left right

Icon-only buttons

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

Buttons Icon only 1

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.


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



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.

Buttons Capitalisation