Buttons

Do

  • Make all buttons state the intent, for example a sign up form button should be labeled 'sign up' and not 'submit'.
  • Differentiate between primary and secondary buttons by making each button colour different.
  • In some cases when a button is visual, e.g. when 'X' is used for closing a window or an 'icon' is used for a search button, use aria-label= to provide a text alternative.

Guidance

Only include a secondary option if absolutely necessary. Less is more - make your options concise.

Example

Sign in
Back
Conditionally revealing content
Next
Validation