Overview

Overview

Buttons are an interactive element that initiates an action, such as submitting a form or opening a page.

Buttons are typically used to trigger an action, such as submitting a form, opening a menu, or initiating a search. They can also be used to navigate between pages or sections of a website or app. The use of consistent button styles helps to create a cohesive user experience and reduce cognitive load for users.

Our Design System has 3 types of buttons, primary, secondary and tertiary.

Primary buttons

These buttons are designed to be the most prominent and visually distinct on a page or within a user interface. Primary buttons are typically used to indicate the primary action that a user is intended to take, such as submitting a form, initiating a purchase, or creating a new account.

Usage guidelines

They should always be used for the most important action on the screen. Primary buttons should be used when the user performs an action, and should describe what happens when pressed.

Primary buttons should be for call-to-actions and are not intended as tools to navigating users to different pages or to another part within the same page, use a text link instead for these situations (Digital NSW, n.d.).

How to use

Primary buttons are a strongest button style and should be only used once on the page. Too many primary buttons can increase cognitive load because people must spend time comparing multiple likely options before making a choice (Apple Inc., 2022).

Do not assign a destructive action as the primary role to this button, even if it seems like the most logical choice. People tend to select primary buttons without reading the label, so this could lead to accidentally losing content. Instead, assign the primary role to a nondestructive button to prevent this from happening (Google, 2022).

Secondary buttons

Secondary buttons are used to provide a visual hierarchy and allow users to perform secondary or less important actions. These buttons use an outlined style which is lower in visual weight in contrast compared to the primary button.

Usage guidelines

Use Secondary Buttons for Less Important Actions: Secondary buttons should be used for actions that are less important than the primary action, but still relevant (Google, 2022).

Tertiary buttons

Tertiary buttons provide users with a third option action that is less important than the primary and secondary actions. They're smaller and less visually prominent than primary and secondary buttons and are typically used in situations where a third option is needed.

Usage guidelines

Tertiary buttons should be used sparingly and only when necessary to avoid cluttering the user interface and confusing the user.

They can be used as a "cancel" or "back" option in a multi-step process, to display a help menu or provide links to related content. Typically, it performs the opposite action to the secondary button (e.g. Cancel vs Save).

General usage guidelines for buttons

Use the appropriate button component for the appropriate action. Using the wrong button can lead to confusion and frustration for the user.

How to use

Do

• Label buttons with what they do for users. The button should clearly show users what will happen when they click it. Use action words to describe the task, like ‘Create account’ for a button that lets users sign up. This way, users know what to expect after clicking the button.
• Put buttons where users can easily find them.
• Make the most important button look like it’s the most important one, try to use only one primary action button on a page so that it clearly stands out.

Do not:

• Do not overuse buttons for links as makes them less noticeable.

Guidelines for using icons in buttons

Our buttons can include icons next to text labels to both clarify an action and call attention to a button. These icons either be trailing icons placed after the label or leading icons.

Don't place both a leading and a trailing icon (Google, 2022).