CSS Library

Call to action buttons and links - UX design guide

This guide will show you examples of common buttons and actions based on common scenarios.

Call to action overview

When to use it

To get users to do something

Rules for CTA

  • Call to Action should be labelled as actions, starting with a verb (Ex: Report your payroll). Actions are labelled as sentence case.
  • The language should be as direct and simple as possible.
  • The language should call a specific action.

Rules for CTA buttons

  • Use no more than one primary button per page. Use secondary buttons if there are more than one CTA on the page. If the button is inside a component, follow the style of the component. 
  • Normally no icon is used in a button. Consult with the UX team if you think an icon is necessary for a specific button.
  • If there are multiple buttons in one row, use mr-2 for spacing. For mobile, expend the button to the full width or discuss case by case to avoid mis-clicking.
  • Use default size (medium) buttons for normal buttons on a page
  • For buttons in a table, use small size buttons

Rules for CTA links

  • For catching user's attenetion, follow "icon+action" structure for CTA links. Otherwise, icons can be removed for creating a simple UI.
  • Use icons from Font Awesome. Talk with UX team for the chioce of icons if the action is not already in use. CTA links already in-use can be found here.
  • CTA links are mostly used inside talbes and cards instead of small buttons to avoid busy UI. However, if the actions are the main purpose of the page, or the UI looks good with the buttons, you can still use small buttons. In this case, user testing is recommended for finding the best solution.

Moving forward

When to use it

When the user is moving forward in a liner flow with no moving back option

Rules

  • Use the primary button unless there is a higher level primary action button on the page
  • Change the language based on the specific action

Common actions

Continue, Next, Exit, Save and submit...

Example

Continue

Moving back and forward

When to use it

When a user is engaged in a linear flow and using the buttons to nevigate back and forward

Rules

  • Use primary button for moving forward and secondary button for moving back
  • Put two buttons side by side (secondary button & primary button)
  • Change the language based on the specific contents of the page

Common actions

For moving back: Back, Discard, Cancel...

For moving forward: Continue, Next, Proceed to review, Save and review, Publish, Submit...

Examples

Example 1
Back Continue
Example 2
Discard Save and review

Single action

When to use it

When the action button is working as a starting point for the user to start a flow/action

Rules

  • Use the primary button unless there is a higher level primary action button on the page; or discuss case by case if needed
  • Buttons can be replaced by action links in tables to avoid bust UI
  • Change the language based on the specific action
  • If the action button is part of a component, please refer to the ux library and follow the design

Common actions

Save, Download, Give feedback, Add a new item, Submit a request, Show more, Choose this...

Examples

Example 1

Summary

Add a new item
Example 2
Example 3
Does our new payments tool work for you?
Give feedback
Example 4

Choice A

Table header1 Header 2
January 1, 2020 $200.00
April 1, 2020 $300.00
Choose this
Example 5

Contact details

Edit
Name:
Jon Boris
Company name:
Acme industrial
Email address:
Jon@abc.com
Phone number:
604.555.1111
Preferred method of communication:
Phone

Multiple actions

When to use it

When there are several actions the user can do to one item

Rules

  • If there is no primary button on the page, use the primary button for the more often used action and use secondary buttons for others
  • If there is a primary button on the page, use secondary buttons for the actions.
  • Buttons can be replaced by action links in tables to avoid bust UI
  • Change the language based on the specific action

Common actions

Edit & Delete; Back to A & Back to B;

Examples

Example 1
Back to summary page Back to dashboard
Example 2

For several buttons on the page, use default-size buttons

Edit Manage Delete
Example 3

For several action buttons in tables and cards, use small buttons or action links, depending on the UI of the entire page

Advil
Service or purchased on Aug 13, 2022
123 Groceries
1 unit at $24.24 per unit
Edit Remove
Subtotal: $24.24
PST: $1.70
GST/HST: $1.21
Total: $27.15

Action confirmation

When to use it

When a user is doing an irrevocable action, use action confirmation buttons to confirm it

Rules

  • Normally action confirmation buttons are used within a modal box, side by side. (Secondary button & Primary button)
  • Use primary button for the action that causes no loss or positive feedback, and use secondary button for confirming the previous action or negative feedback to avoid any loss.
  • Normally only two buttons are used in a modal box. If there is no cancel button, users can use the cross icon in the modal box or click outside of the box to return to the previous screen
  • Change the language based on specific actions

Common actions

Exit & Cancel; Delete & Cancel; Discard & Cancel; Exit & Save and exit

Examples

Multi-selecting related action

When to use it

When the user is multi-selecting several items and going to do one action to them

Rules

  • Disable the original action button if the item is selected with multi-selecting
  • Use primary button for higher visual weight
  • For the action, use "verb + selected + item category". Use (number) after the action to address the number of items. E.g. Delete selected claims (10)
  • Switch to plural if the user has selected more than one item. E.g. Delete selected claim (1) vs Delete selected claims (10)
  • Change the language based on the specific action

Common actions

Delete selected items (x), Download selected files (x), Recover selected records (x), Edit selected items (x)...

Example