Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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


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 Button

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

.button--cancel
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);
}







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.

  • No labels