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 15 Next »

DONE

Buttons allow users to do something on the page. They are not meant for links to navigation to another page.


Types of buttons:

  • Default
  • Primary
  • Cancel/Destructive

Button CSS

CSS Variables

Note: the values may change overtime, for latest values refer to Design Tokens (CSS Variables)

--font-size-default : 14px;
--color-focus: #E77600;
--border-radius : 4px;

--color-text-white : #ffffff

--color-primary-light: #337ab7;
--color-primary: #165788;
--color-primary-dark: #{$base};

--color-default: #6e787c;
--color-default-dark: #596063;

--color-cancel: #88161f;
--color-cancel-dark: #6e1219;



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








  • No labels