Button

The button component is a clickable element used to trigger actions or submit forms. It can be rendered as a native button or anchor element.

 

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