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;
    }
  }

Default
- Border: var(--color-default)
- Colour: var(--color-default)
- Default: var(--color-default)
  - Hover:
    - border-color: var(--color-default);
      background-color: var(--color-default);
      color: var(--color-text-white);
  - Active:
    - background-color: var(--color-default-dark);
      color: var(--color-text-white);
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.