Buttons allow users to do something on the page.
COTUI - Component Reference
https://cityoftoronto.github.io/COT_UI/?path=/story/2-components-button--all-buttons
Types of buttons:
- Default
- Primary
- Cancel/Destructive
Button
...
CSS
CSS Variables:
--font-size-default : 14px
--color-default : #6e787c
--color-text-white : #ffffff
--border-radius : 4px
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
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:
...
- Colour:
- Default: #88161f
- Hover: #88161f
When to use button large:
Spacing Between Buttons:
COTUI - Component Reference
...
Button
| Code Block | ||||
|---|---|---|---|---|
| ||||
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-white);
&[aria-pressed="true"]{
background-color: var(--color-primary-dark);
color: var(--color-text-white);
}
&:disabled, &[aria-disabled="true"]{
pointer-events: none;
opacity: 0.4;
}
&:hover:hover, &:active{
background-color: var(--color-primary-light);
border-color: var(--color-primary-light);
} |
Cancel Button
| Code Block | ||||
|---|---|---|---|---|
| ||||
background-color: var(--color-white);
border-color: var(--color-cancel);
color: var(--color-cancel);
&[aria-pressed="true"]{
background-color: var(--color-cancel-dark);
color: var(--color-text-white);
}
&:disabled, &[aria-disabled="true"]{
pointer-events: none;
opacity: 0.4;
}
&:hover:hover, &:active{
border-color: var(--color-cancel);
background-color: var(--color-cancel);
color: var(--color-text-white);
} |
| Jira Legacy | ||||||
|---|---|---|---|---|---|---|
|