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 |  #0070C4 |
 #004F84 |
opacity 40% | |
| Outline |  #FEBA035, 2px |
|||
| Example |  |
 |
 |
 |
Buttons
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.
Variations
Few exceptions exist where the size of a button changes.
Was this page helpful?
You will NOT receive a reply on your feedback. Do NOT include personal information. To get answers to questions, use Alberta Connects.
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.