Skip to content

Notifications

Government mail service may be affected by the Canada Post labour disruption. See how to send and receive government mail during this time. 

AI search tool

Try our new Search AI tool as an alternative to the search below to improve your experience on Alberta.ca using artificial intelligence. See the AISearch fact sheet for more information.

Popular topics:

Part of Design standards checklist

Clickable objects

Guidance on clickable, interactive objects, plus aesthetics and behaviours.

Explore pages in:
Design standards checklist

Properties

On Alberta.ca most clickable objects follow the same rules using the same states colours, behaviour and text decoration (underline).

  Default Hover Focus/active Disabled
Colour Blue swatch  #0070C4 Dark blue swatch  #004F84   opacity 40%
Outline     Yellow swatch  #FEBA035, 2px  
Example Default primary button Primary button in hover status Primary button that's active Primary button that's disabled.

Buttons

Anatomy

Button anatomy

Anatomy: icon + label + indicator
Icon: a visual associated with the button label and it is optional
Indicator: a symbol that represents the behaviour of the button, such as navigation, download, expand, collapse, and more

Types

Buttons submit data from a user input. You commonly find buttons at the bottom of forms or simple field box groups, such as a search function. You may also use a button as a call-to-action or as navigation links.

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

Primary  Secondary

Variations

Few exceptions exist where the size of a button changes.

Large buttonSmall button
Back to Design standards checklist
Next Grids