Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Primary button

This is the primary button styling

Secondary button

This is the secondary button styling

Neutral button

This is the neutral button styling

How it works

Not everyone uses a mouse, therefore all interactive elements must be focusable. The content and focus order must be logical.

In order to achieve this, on keyboard focus, a orange box will appear around the interactive element, so it is visible to users.

Similarly, with links on coloured backgrounds, a box of solid colour (either black or white) appears behind the link text to ensure readability of the link text.

Intended purpose

There are differences as to when a button should be used rather than a link.

Buttons are used for actions that affect the website’s frontend or backend.

  • Performs an action, like submitting a form.
  • Button summons a popup or modal, or changes elements of the website.
  • Label text should be short. E.g. "Sign in"

Links are used for navigation and actions that don’t affect the website at all.

  • Text precedes or follows the link. E.g."Don't have an account? Sign up"
  • Link redirects to an external site or document.
  • Label text can be longer. E.g. "About the new look"