Buttons are used to help users carry out an action on a page like starting an application, saving their information or submitting an order.
Why we have a design pattern for buttons
- Users should be able to easily recognizable, accessible buttons they can use to carry out a specific action.
- Users should have calls to action in the form of buttons that present them with large targets to interact with.
When to use a button
Buttons should only be used for actions.
- On Yukon.ca bridge pages they are used as the call to action to send users from Yukon.ca to the Start page for the digital service.
- For transactional services and online forms, buttons are used as the call to action for Back links, for users to Continue to next step and in some cases to Save or Print.
When not to use a button
Do not use a button
- as a link to another page; or
- to clear or delete a user's information. In these instances, use a Back link so users can go back and make changes.
If a user wants to stop using the service, they can close their web browser window.
Types of buttons and how they work
These buttons are used for transactional services and online forms
Primary button
A primary button is the most important action a user can take on a page. There should only be 1 primary button per page. For example:
Placement
Where you place a primary button will depend on the type of service you're building. In most cases the primary button is at the bottom of the page aligned to the left. In some instances the primary button could appear at the bottom, aligned to the right edge of each page.
Style
Primary buttons use the government's extended colour palette. The border and background colour is a shade of River Blue with 55% of black. The text colour is white.
Primary button hex codes
Primary button hover state
The primary button hover state uses the government's extended colour palette. The border and background colour is a shade of River Blue with 75% of black. The text colour is white.
Language
See language section below.
Function
When a user hovers over a primary button it should change to indicate a hover state.
When a user clicks on a primary button the link should take the user directly to the promised content. For example if the button call to action is "Apply online" it should take the user to the Start page for that service.
Secondary button
A secondary button is the next most important or optional action a user can take on a page. For example:
Placement
Placement will depend on the type of service you're building and the platform or COTs product you're using. In most cases the seconday button should appear at the bottom, aligned to the left of each page.
Style
Secondary buttons use the government's extended colour palette. The border and text colour is a shade of River Blue with 55% of black. The background colour is white.
Secondary button hex codes
Secondary button hover state
The secondary button hover state uses the government's extended colour palette. The border and text colour is s a shade of River Blue with 75% of black. The text colour is white.
Language
See language section below
Function
When a user hovers over a secondary button it should change to indicate a hover state.
When a user clicks on a secondary button the link should take the user directly to the promised content. For example if the button call to action is "Go back a step" it should take the user to the previous page of the service.
How to use primary and secondary buttons together
ADD EXAMPLE OF A FORM WITH CHEVRONS AND AND EXAMPLE WITH Go back a step
Separate primary and secondary buttons with 'or.' For example:
or
What to do if you need more than one primary and secondary button
In most cases you will only have one primary and one secondry button, but there are instances where there are multiple calls to action on a single page. In these instances, do user research to identify the most important tasks for users. If you find there are multiple tasks on the page, consider seperating it on multiple pages or steps.
A common example we come across is where the primary action could be to "Continue to next step" but you also need to upload a file on the page, or you have the option to Save the form or Print the form. There are examples below to show how you can style and place these buttons in the service.
Disable button
Disable buttons have poor contrast and can confuse some users. Avoid them if possible. For example:
Only use disable buttons if research shows it makes the user interface easier to understand.
Language
Text on buttons should be written in sentence case and be a call to action. This usually follows a verb + noun pattern. For example:
- 'Apply online' on a Yukon.ca bridge page.
- 'Start an application' on a service Start page
- 'Renew another registration' to add another item to an order.
- 'Continue to next step' when the service does not save a user’s information.
- 'Finish and submit' to submit an application.
You may need to include more or different words to better describe the action. For example, 'Add another claim' and 'Mail registration to a different address'.