Button Style

Buttons allow users to do something on the page.

Types of buttons:

Default
Primary
Cancel/Destructive

Button Style

CSS Variables:

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

All Buttons

.button

display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background: transparent;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: var(--font-size-default);
line-height: 1.42857143;
border-radius: var(--border-radius);
user-select:none;
@extend %focus;

Default Button

.button--default

border: 1px solid var(--color-default);
background-color: var(--color-white);
color: var(--color-default);

 &:hover:hover{
    border-color: var(--color-default);
    background-color: var(--color-default);
    color: var(--color-text-white);
 }

 &:active, &[aria-pressed="true"]{
    @extend %pressed;
    background-color: var(--color-default-dark);
    color: var(--color-text-white);
 }

 &:disabled, &[aria-disabled="true"]{
    pointer-events: none;
    opacity: 0.4;
 }

 &:focus{
   border: 3px solid var(--color-focus);
   background: var(--color-focus);
   color: var(--color-text-white);

   &:hover{
     background: initial;
   }
 }

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

type	key	summary	assignee	reporter	priority	status	resolution	created	updated	due
Unable to locate Jira server for this macro. It may be due to Application Link configuration.