Buttons help our travellers make all kinds of action, from logging in to booking that dream trip.
This is the base tappable area of the button.
The is the copy of the button. It’s usually the action that’s performed once selected. Ideally this should be verb-led (not mandatory but preferred).
Leading and trailing icons (optional)
These are the optional icons that come before or after label copy. See usage for guidance on how and when to use these.
Use primary buttons to show the key action on a page or view. Most pages should only have one primary action – except search results where multiple primary buttons can be used.
Within an entire screen, featured buttons are to be used sparingly. Overuse tends to just create noise. If you have one critical button in your flow, consider using this for the most emphasis. We also use this for Skyscanner Direct Book actions.
Use secondary buttons next to primary buttons to indicate alternative or less pronounced actions.
Text buttons, or links, are subtle in their appearance and should be used for supplementary action. They’re to be used for communicating non-destructive actions that a user can do. For example, this could be a way to show more results to a listing page. Like all other button styles, these are available in two sizes and have hover, active and disabled states.
Destructive buttons are used to remove things or for actions that are often irreversible. These buttons require an opt-in checkbox or a confirmation modal before the action is done. For example, a button that permanently closes an account.
Primary on dark
These are solid-fill buttons that work on dark images.
Primary on light
These are solid-fill buttons that work on light images. For example, a button on a map.
Secondary on dark
These have less emphasis than primary on dark. They work well for solid dark backgrounds.
Hyperlink on dark
These have less emphasis than hyperlink. They work well for solid dark backgrounds.
Buttons come in two sizes: default and large. Note that the radius, typography, and spacing are the same – only the height differs.
The usual size for buttons everywhere across our platforms
These buttons are used sparingly across our product. They may be used for page components that really demand attention, like the search bar on the homepage.
We always use 8px radius corners, regardless of size or style.
This is the resting state of the button.
This indicates that interaction is available for people using pointer devices.
This state communicates a button has been pressed and something is in progress.
Note: The button is disabled from further interaction until either the action has been completed, or the action failed to complete.
The disabled state indicates that an action can’t be taken until a previous action is completed.