Buttons

Styling and use of our primary and secondary buttons

How to use

Two styles of buttons are required in order to make a visual distinction between actions and their relative importance, so that a user is guided to the to the primary call to action.

Visual weight is how users compare button priority. The button with the strongest visual weight will get the most attention, so it’s important that primary actions have the strongest visual weight. Secondary actions should have the weakest visual weight. This distinction will minimise the risk for potential errors and help people complete their tasks as quickly as possible.

Primary

Primary buttons are used for actions such as ‘Submit’, ‘Continue’, ‘Finish’, or ‘Log in’. They enable the user to complete the most important action on the page. There should only ever be one primary button on a page.

Secondary

Secondary actions are actions such as ‘Cancel’, ‘Go back’, or ‘Reset’. They are less important, alternative actions, which often have negative consequences when used accidentally. For example, hitting ‘Reset’ may erase all the data a user has entered. Where possible, destructive actions should be styled as a link to further mitigate against this issue.

Tertiary

Tertiary functions can be communicated with an icon along eg RSS feed. Generally positioned at the bottom of the page or in the site footer.

Jisc signature style

“Think of the site or app as a conversation started by a busy user. The button plays a crucial role in this conversation.” Source: UX Planet.

In order for Jisc to have a consistent tone of voice in these conversations we have defined a signature style for our buttons that all services must adopt.

 

Jisc signature button styles

Jisc signature button styles

If you would like a copy of the basic HTML and CSS for our button styles get in touch with us.

Considerations when using buttons

  • Use verbs in titles – an action-specific title shows that a button is interactive and says what happens when you interact with it
  • Use sentence case for titles and keep them short – overly-long text can crowd your interface and may get truncated on smaller screens
  • Use buttons to initiate a task or action (eg submit a form) – should not be used to link to another site / more information
  • Only use one primary button per page, unless repeating a primary action
  • Put buttons in a sensible order
  • Buttons should be vertically aligned with any corresponding input field to create a clear path to completion
  • Icons can be included where reinforcing action

Further reading