Button

Buttons represent the major calls to action in our products. They are split into primary (most important) and secondary.

Primary Button

Primary buttons represent the most important call to action for our users. Aim to use only one per UI layout.

Example: Save

Default

Default

Hover

Hover

Focused

Focused

Pressed

Pressed

Loading

Loading

Disabled

Disabled

Secondary Button

Secondary buttons represent calls to action of lesser importance to our user (secondary actions). Keep the number of secondary buttons minimal but you can use more than one per UI layout.

Example: Close Record

Default

Default

Hover

Hover

Focused

Focused

Pressed

Pressed

Loading

Loading

Disabled

Disabled

Delete

Default

Default

Hover

Hover

Pressed

Pressed

Loading

Loading

Sizes

Small

Small

Small buttons are used in tables as a sub-component.

Medium (Default)

Medium (Default)

Medium buttons are our default size, meaning that they are the preferred option when designing an interface.

Large

Large

For use in mobile layouts to provide the user with a larger input area on touch devices.

 

Interactions

Below is an example of the hover states for primary and secondary buttons. Hover your cursor over each button to view the hover state. Note the transition between the default and hover appearances.

Content Guidelines

A good rule of thumb to follow when writing the text for buttons is that the user should never be surprised by what happens after they click or tap. The text used in any button should be accurate, specific, and explicit—not vague. Do not use Yes and No for buttons. Say what action really happens when the user clicks.

  • Use title case capitalisation so 'Log In'. There are a number of exceptions that do not take a capital letter, these are:
  • Articles (‘a’, ‘an’, and ‘the’)
  • Coordinating conjunctions (‘and’, ‘but’, ‘for’, ‘nor’, and ‘or’)
  • Prepositions of four or fewer letters (‘with’, ‘of’ and ‘for’)
  • Always capitalise the first and last words, regardless of their parts of speech
  • Use an action verb for the button text (for example, Save, Continue, Print, and so on).
  • Choose specific words over vague words: ‘Try it Now’ is a common call to action, however, it doesn’t really tell the user what will happen next.
  • Choose words that logically align with the preceding content: if your headline says ‘Sign up for incredible deals!’ then your button text should also say ‘Sign Up.’
  • Navigation buttons are an example of an exception to using an action verb. These often use Next and Back.
  • For UI writing, do not use more than three words in a button, keep it short and simple. For mobile screens, very few characters will fit.
  • Remember that the text will be translated so keep localisation in mind