Page Comparison

Buttons allow users to do something on the page. 

CSS Variables:

--font-size-default : 14px
--color-default : #6e787c
--color-text-white : #ffffff

There are three types of buttons:

• All Buttons
  • Font Size: var(--font-size-default) : 14px
• Default
  
  • Border: var(--color-default)
  • Colour: var(--color-default)
  • Default: var(--color-default)
  • Hover:
    • Colour: var(--color-text-white)
    • Background: var(--color-default)
• Primary
  
  • Colour:
    • Default:
    • Hover:
• Cancel/Destructive
  • Colour:
    • Default: #88161f
    • Hover: #88161f

When to use button large:

Spacing Between Buttons:

COTUI - Component Reference

https://cityoftoronto.github.io/COT_UI/?path=/story/2-components-button--all-buttons

...