Overview
Buttons are a common interface element used in Design Systems to enable users to interact with digital products and services.
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.
<ul class="qld__link-list qld__link-list--inline">
<!-- Link button -->
<li><a href="#" class="qld__btn" hover>Link</a></li>
<!-- Default button -->
<li><button type="button" class="qld__btn">Default</button></li>
<!-- Leading icon -->
<li><button type="button" class="qld__btn qld__btn--icon-lead"><i class="fa-light fa-rocket-launch"></i>Leading icon</button></li>
<!-- Trailing icon -->
<li><button type="button" class="qld__btn qld__btn--icon-trail">Trailing icon<i class="fa-light fa-rocket-launch"></i></button></li>
<!-- Disabled -->
<li><button type="button" class="qld__btn" disabled>Disabled</button></li>
</ul>
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.
<ul class="qld__link-list qld__link-list--inline">
<!-- Link button -->
<li><a href="#" class="qld__btn qld__btn--secondary" hover>Link</a></li>
<!-- Default button -->
<li><button type="button" class="qld__btn qld__btn--secondary">Default</button></li>
<!-- Leading icon -->
<li><button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-lead"><i class="fa-light fa-rocket-launch"></i>Leading icon</button></li>
<!-- Trailing icon -->
<li><button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-trail">Trailing icon<i class="fa-light fa-rocket-launch"></i></button></li>
<!-- Disabled -->
<li><button type="button" class="qld__btn qld__btn--secondary" disabled>Disabled</button></li>
</ul>
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.
<ul class="qld__link-list qld__link-list--inline">
<!-- Link button -->
<li><a href="#" class="qld__btn qld__btn--tertiary" hover>Link</a></li>
<!-- Default button -->
<li><button type="button" class="qld__btn qld__btn--tertiary">Default</button></li>
<!-- Leading icon -->
<li><button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-lead"><i class="fa-light fa-rocket-launch"></i>Leading icon</button></li>
<!-- Trailing icon -->
<li><button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-trail">Trailing icon<i class="fa-light fa-rocket-launch"></i></button></li>
<!-- Disabled -->
<li><button type="button" class="qld__btn qld__btn--tertiary" disabled>Disabled</button></li>
</ul>
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.
When to use
Buttons are commonly used to encourage users to take an action, such as "Submit" or "Register".
When not to use
Do not use buttons in place of text links for simple navigation or for linking to external content. Buttons should only be used when a more prominent call-to-action is needed.
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.
Guidelines for leading icons
- Use when the action or content is closely associated with the icon, and when the icon helps to reinforce the meaning of the label
- Place the icon to the left of the label to provide visual cues for users to scan and recognise the action or content
- Use simple, recognisable icons that are easy to understand
Guidelines for trailing icons
- Use when the action or content is not closely associated with the icon, and when the icon provides additional information or context
- Place the icon to the right of the label to avoid distracting users from the label text
- Use subtle, low-contrast icons that do not compete with the label text
- When the icon is directing the user to an action like an external page
Don't place both a leading and a trailing icon (Google, 2022).
Research and rationale
The design of our buttons follows patterns that were set out in the DTA. Further research was conducted into the size and style of these buttons based on NSW and Material design. Using the DTA as a foundation we added active states, increased the height slightly and more colour options and the ability to add leading and trailing icons.
Button size
Our Design System buttons use a height of 48px. There is no hard and fast rule that buttons must be exactly 48px in height, as the ideal button size can vary based on the context and design of the website or application. However, it is commonly recommend that you should use a minimum touch target size of 48px x 48px to ensure that buttons are easily clickable on both desktop and mobile devices (W3C, n.d.).
Material Design guidelines recommend using a minimum height of 36dp (density-independent pixels), which is equivalent to 48px on a standard display density (Google, n.d). However, this guideline is intended as a starting point, and the ideal button size may need to be adjusted based on the specific needs of the website or application .
Colour
Secondary buttons in our Design System can be coloured differently to primary buttons using the secondary action colour. We've done this as a way of being able to incorporate more brand colours into a design and to also align the web content accessibility guidelines which state that colour should be used to draw attention to important buttons and to create visual contrast between different types of buttons (W3C, 2018).
Style
We chose to continue the use of style and not size that was set out by the DTA as a method of visually distinguish the preferred choice among multiple options. This is also supported by Apples material design guidelines which say that when you use buttons of the same size to offer 2 or more options, you signal that the options form a coherent set of choices. If you want to highlight the preferred or most likely option in a set, use a more prominent button style for that option and a less prominent style for the remaining ones. (Google, n.d). There are multiple variations of our button component that also allow for different variations of visual loudness which can assist a user with low literacy so they can use visual loudness to help complete a task.
Buttons as links
Based on the recommendation from the DTA our buttons can also be implemented as links <a> or as buttons <button>. This gives users flexibility so they can make the most semantic markup possible. Using incorrect HTML in certain situations can cause accessibility issues (Digital Transformation Agency, 2018).
Underline on hover
Buttons have an underline on hover in order to address WCAG2.0 Criterion 1.4.1.
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
Note: Focus state isn't underlined as it’s conveyed using the global focus outline.
Round corners
The DTA discovered during usability observation that the secondary button and text inputs could sometimes be mistaken for layout or design elements with borders. The border width was increased, and a border radius was added to interactive elements (Digital Transformation Agency, 2018). Due to this we've opted to maintain this stylistic approach for the design of our buttons.
Classes
| Name | Description |
|---|---|
| Default. |
| Secondary buttons. |
| Advance banner. |
| Adds drop shadow. |
| For styling <i> elements before the text. |
| For styling <i> elements after the text. |
Variables
| Name | Description |
|---|---|
| Colour primary buttons on light backgrounds. |
| Hover colour primary buttons on light backgrounds. |
| Colour for text on primary buttons on light backgrounds. |
| Colour for primary buttons on dark backgrounds. |
| Hover colour primary buttons on light backgrounds. |
| Colour for text on primary buttons on dark backgrounds. |
| Colour for secondary buttons and icons on light backgrounds. |
| Colour for secondary buttons and icons dark backgrounds. |
Accessible button requirements
Keep these considerations in mind if you are modifying the design system or creating a custom component.
General guidelines
Ensure that the button is large enough to be easily clicked or tapped, with enough space around it to avoid accidental clicks. It's commonly recommended that you should use a minimum touch target size of 48px x 48px to ensure that buttons are easily clickable on both desktop and mobile devices.
WCAG guidelines
1.4.3 Contrast (Minimum)
Ensure that there is sufficient contrast between the button background and text or icon on the button, to make it easy to read for users with low vision or colour blindness (W3C, 2018).
1.4.1 Use of Color
Buttons should have an underline on hover so that colour alone is not the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (W3C, 2018).
2.1 Keyboard Accessible
Ensure that global alerts are operable by providing keyboard accessibility. Users should be able to navigate and interact with alerts using only a keyboard, without requiring a mouse or other pointing device. This includes ensuring that all interactive elements within the alert are keyboard accessible (W3C, 2018).
2.4.7 Focus Visible
This guideline requires that all interactive elements, including buttons, have a visible focus indicator that is easy to see and identify. This allows users who navigate using a keyboard or other assistive technology to know where they are on the page (W3C, 2018).
3.2.4 Consistent Identification
The intent of this Success Criterion is to ensure consistent identification of functional components that appear repeatedly within a set of Web pages. For example, buttons that perform the same function should look the same throughout the website or application (W3C, 2018).
4.1.2 Name, Role, Value
Use semantic HTML markup for buttons, including the appropriate <button> element and the "type" attribute. Use descriptive names or labels for buttons, so that assistive technology can identify the button and its function (W3C, 2018).
4.1.3 Status Messages
Use visual and/or auditory feedback to provide status messages to users, such as when a button is clicked or an action is taken (W3C, 2018).
Related
References
Google (n.d.) Buttons, Material Design 3, accessed 11 April 2023.
Babich, N (2016) A Quick Guide for Designing Better Buttons, Smashing Magazine, accessed 11 April 2023.
Roller, C (2012) 7 Basic Best Practices for Buttons, UX Matters, accessed 11 April 2023.
Digital Transformation Agency (2018) Buttons, Gold Design System (Formerly DTA), accessed 10 April 2023.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1, World Wide Web Consortium, accessed 10 April 2023.
W3C (n.d.) Understanding Success Criterion 2.5.5: Target Size, Web Content Accessibility Guidelines (WCAG) 2.1, accessed 11 April 2023.
Harley, A (2013) Icon Usability, Nielsen Norman Group, accessed 11 April 2023.
Digital NSW (n.d.) Buttons, NSW Design System, accessed 10 April 2023.