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.