Buttons
Alignment depends on the rest of the content
Example of paragraph with buttons
This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components. Always left-align type; never center it.
Example of mobile screen
This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components. Always left-align type; never center it.
Hierarchy
Preferably use 1 primary button per page.
If you repeat it, it keeps the same CTA and thus should have the same function.
Don't overcrowd a page with buttons. Use buttons sparingly.
Switch to basic
More about switching to basic account.
Pause temporarily
More about pausing an account
Switch to basic
More about switching to basic account.
Pause temporarily
More about pausing an account
Copy
Button copy should always be very clear and explain to the user what is going to happen when he/she interacts with the button.
Buttons are for actions. Actions = verbs.
A good button label invites users to take action. Best to use verbs, and label the button with what it actually does. Try using the phrase “Would you like to ...?” (eg. “Would you like to add to basket?”)
Display banners (3rd parties)
For display banners on 3rd party websites, we add an arrow. This emphasises the promotion. It also indicates that you're going to another webpage.
