Button

A button lets the user perform an action with a tap or a click.

Button
When to use

Use a button:

  • when the user needs to perform an action, like initiating a new flow or confirming something.

Don't use a button:

  • when you want to link to other pages or external resources (use a link instead)
  • for hierarchical navigation, where the user navigates to a sub-topic and goes deeper into the product (use a navigation option instead)

Priorities and types

Priorities

Buttons support 3 different priorities that can be combined with 3 different types. Priorities set a visual hierarchy amongst the buttons displayed on the screen to help more important buttons to take precedence over others.

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.

Types

Types are designed to emphasise the nature of the action.

A default button.
Default

Default is the standard button type that conveys a general action. Use this by default.

A negative button.
Negative

Use negative for confirming destructive actions, like canceling a transfer or closing a balance.

Action button vs Button

Action button and button are similar but separate components. Understanding their visual design differences will help you decide when to use each one.

Height

Action button is only available in the small size, whereas button also comes in a medium size.

Width

The main difference between the two is that the action button doesn’t have a full-width version. Instead, the width of the action button changes to fit its content.

Icon

Action button supports the use of a left or right-aligned icon, whereas button does not.

Best practice
  • Place your buttons on the screen in the order of their priority, as this should mirror the order of usage.
  • Don't use the positive type for starting flows — use it to successfully finish a flow.
  • Don't have multiple buttons with the highest priority level (unless they have different styles) — there’s usually a single, most important action on any given screen.
  • Don't have too many buttons on a screen.

Placement

The button should always be contextual, which is why it should be used in line with the content. This gives a stronger cohesion between the context and the action that it performs.

On mobile, if an action must be taken by the user, for example, to finalise something or proceed in the current process, it is best to keep the button visible all the time.

You can do this by pinning it to the bottom of the screen, outside of the scrolling area. Please pin only one primary action per screen.

Interaction

Unless the button is disabled, the user can tap or click on it to perform the action assigned to it.

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

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'.
Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation