Buttons

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

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"
Back to top