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






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






Delete




Sizes



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