Figma Links: Web / iOS / Android / Annotation

Overview

Buttons are used to trigger an action in the interface. We provide a number of styles that work on their own or part of a group. There are two styles of buttons; buttons and icon buttons

Key Points

Buttons

• We have a suite of nine button style that can be used with labels and icons to indicate intent.
• Icons can be placed before or after the button label, the layout rules vary slightly.
• Both web and native mobile layouts can use full width buttons if it is the main action on the interface.
• Buttons for the web are a single 44px height, however, native also has two other size options; small at 36px and large at 52px.
• The disabled states of buttons should only be used as a last resort. Aim to reduce cognitive load for the user by displaying buttons when an action is available.

Icon Buttons

• Default Icon Buttons are 44px, allowing them to align with buttons, and contain 24px icons.
• Small Icon Buttons are 24px and contain 16px icons. They should use whitespace around them to give a clear tappable space.
• Both button sizes are only available in limited styles.

Buttons

Usage

https://lh5.googleusercontent.com/yRwJ8FBwdnyYri_Fkp004Umb2MfhIFHZCEpg1ae92Ujnn2IUQL7gDyBQKZdOUKzQ9M5GylMiy4NHqvVn9Rg8qSot3Ev5wg5oSLP7ljUVkqBSQxmZnhIICUlqBSPKTvxhDrlNCY40

We have nine button styles in our suite, some have a specific use:

• Primary and secondary styles should be used for key actions.
• Accent is used to draw attention to a particular action