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 |
|
|
|
|
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.