Buttons

Overview

Buttons are commonly used as calls to action and found at the bottom of forms or simple field box groups, such as a search function. Buttons also highlight the most important links on a page, such as online forms, documents, another web page, applications and mailing lists.

Design

Icons

Buttons may use symbols or icons to indicate what happens when pressed.

• Icon – optional visual aid associated with the button label (left side of the text).
• Indicator – a symbol that represents the behaviour of the button, such as navigation, download, expand, collapse and more (right side of the text).

Large or small buttons

Few exceptions exist where the size of a button changes.

Usage guidelines

Body copy on content pages

Within body copy, use buttons to highlight the key call to action when a transaction must be completed on a different page.

Buttons within content can navigate to:

• applications: Seniors Property Tax Deferral Program
• login portals: Fuel tax – Fuel sellers
• online forms: Family violence – Find supports
• external sites: Asbestos worker training
• key publication: Alberta Asbestos Abatement Manual

Bands

Use a band as a navigation element:

• horizontal feature band: Hydrogen development
• sign-up band: Laws Online Catalogue

Right column on landing pages

Use to link to a login or sign up page:

• log in to accounts or other external applications: MEP Accounts Online
• sign-up: Springbank Off-stream Reservoir

Content guidelines

Using a button usually means an action or task must be completed. Follow these instructions when creating button text.

Use active verbs

Use an imperative verb to make it a command.

Common call-to-action words for buttons on Alberta.ca include:

• Sign up
• Submit
• Log in
• Subscribe
• Apply now

Avoid using pronouns within a button.

Be brief and to the point

Use a maximum 30 characters including spaces to make the text easy to scan. Ensure the wording relates to the action being taken.

Avoid generic words such as ‘Ok’ or ‘Yes’ as they have the potential to confuse.

Primary versus secondary

When buttons appear side-by-side, a decision must be made about which is the primary and secondary action.

• Use only one button whenever possible. It will always be a primary button.
• Do not use 2 primary buttons. Strategically determine which button should be used as secondary.