Anatomy
Target area
This is the base tappable area of the button.
Label
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.
Styles
Primary buttons
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.
Featured buttons
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.
Secondary buttons
Use secondary buttons next to primary buttons to indicate alternative or less pronounced actions.
Links
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
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.
Sizes
Buttons come in two sizes: default and large. Note that the radius, typography, and spacing are the same – only the height differs.
Default size
The usual size for buttons everywhere across our platforms
Large size
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.
Radius
We always use 8px radius corners, regardless of size or style.
States
Default
This is the resting state of the button.
Hover
This indicates that interaction is available for people using pointer devices.
Loading
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.
Disabled
The disabled state indicates that an action can’t be taken until a previous action is completed.