Buttons
Buttons allow users to take actions, and make choices, with a single tap.
Primary button
Secondary button
Neutral button
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"