Button Pairings

Our button pairings lets the user perform an action with a click.

A example of our button pairings
When to use

Our button pairings are used with most of our patterns to allow the user to perform an action with a click. The pairing consists of a primary button and either a secondary or tertiary button. The primary button should be used for the main action we want a user to take eg. Open an account. The secondary or tertiary button allows the user to find out more information around a service offering or benefit.

a primary button
Primary

Use primary for displaying the most important action of the screen, such as confirming something or submitting a form, as it’s visually more eye-catching than the secondary button.

A secondary button
Secondary

Use secondary for providing alternatives to the primary action, or when none of your actions are more important than the others.

A tertiary button
Tertiary

Use tertiary for less important convenience actions, such as copying information like bank details with a button.

Note: Tertiary buttons are currently underlined on web, and not underlined on mobile due to platform conventions.

An app store button
App Store

Use the Apple App Store button when promoting the Wise app. It can be stand alone on mobile or paired with the Google Play Store on desktop.

A play store button
Play Store

Use the Google Play Store button when promoting the Wise app. It can be stand alone on mobile or paired with the Apple App Store on desktop.

Accessibility

When using the button on mobile, keep in mind that its height might change based on the preferred font size that the user has set system-wide for accessibility purposes.

When using a screen reader, the title of the button will be read out loud, which is another reason to make the title contextual, so people completely relying on the screen reader will also understand what the action is tied to.

It's also important to keep button copy short. Longer copy is harder to scan, and adds to users’ cognitive load. Text might also double in length when it's translated.

To make sure the user always knows what’s going to happen when they click or tap a button, the text must always be fully visible with all of the accessible font sizes and languages we support. That’s why we never truncate button text. Instead, the text wraps and the area of the button grows based on its content and accessible font size.

So on small devices, the button could take up way too much of the screen if we use more than a few words. This decreases the usability of the other parts of the screen, especially if the button is pinned to the bottom.

Content

Button copy should:

  • Start with a verb, like ‘Pay’ or ‘Send’

  • Be just a few words (ideally 1 or 2)

  • Describe the action (if someone only reads the button, they should know what will happen next)

  • Connect to the content around it — for example, it might use the same words as the title

  • Avoid using first person pronouns like ‘me’, ‘my’ and ‘I’

  • Be in sentence case (only capitalise the first letter of the first word)

  • Have no full stop

A button that reads 'Log in'.
A button that reads 'I want to log in to my account'.
A button that reads 'Freeze card'.
A button that reads 'Freeze my card'.