Button: All buttons

HTML
View
Context
Assets
Info
Notes


    
      

        
        <!-- default xs button starts -->
<button class="c-btn c-btn--xs">default button</button>
<!-- default xs button ends -->

<!-- default sm button starts -->
<button class="c-btn c-btn--sm">default button</button>
<!-- default sm button ends -->

<!-- default button starts -->
<button class="c-btn">default button</button>
<!-- default button ends -->

<!-- default lg button starts -->
<button class="c-btn c-btn--lg">default button</button>
<!-- default lg button ends -->

<!-- primary xs button starts -->
<button class="c-btn c-btn--primary c-btn--xs">primary button</button>
<!-- primary xs button ends -->

<!-- primary sm button starts -->
<button class="c-btn c-btn--primary c-btn--sm">primary button</button>
<!-- primary sm button ends -->

<!-- primary button starts -->
<button class="c-btn c-btn--primary">primary button</button>
<!-- primary button ends -->

<!-- primary lg button starts -->
<button class="c-btn c-btn--primary c-btn--lg">primary button</button>
<!-- primary lg button ends -->

<!-- outline xs button starts -->
<button class="c-btn c-btn--outline c-btn--xs">outline button</button>
<!-- outline xs button ends -->

<!-- outline sm button starts -->
<button class="c-btn c-btn--outline c-btn--sm">outline button</button>
<!-- outline sm button ends -->

<!-- outline button starts -->
<button class="c-btn c-btn--outline">outline button</button>
<!-- outline button ends -->

<!-- outline lg button starts -->
<button class="c-btn c-btn--outline c-btn--lg">outline button</button>
<!-- outline lg button ends -->

<!-- link xs button starts -->
<button class="c-btn c-btn--link c-btn--xs">link button</button>
<!-- link xs button ends -->

<!-- link sm button starts -->
<button class="c-btn c-btn--link c-btn--sm">link button</button>
<!-- link sm button ends -->

<!-- link button starts -->
<button class="c-btn c-btn--link">link button</button>
<!-- link button ends -->

<!-- link lg button starts -->
<button class="c-btn c-btn--link c-btn--lg">link button</button>
<!-- link lg button ends -->

<!-- block xs button starts -->
<button class="c-btn c-btn--block c-btn--xs">block button</button>
<!-- block xs button ends -->

<!-- block sm button starts -->
<button class="c-btn c-btn--block c-btn--sm">block button</button>
<!-- block sm button ends -->

<!-- block button starts -->
<button class="c-btn c-btn--block">block button</button>
<!-- block button ends -->

<!-- block lg button starts -->
<button class="c-btn c-btn--block c-btn--lg">block button</button>
<!-- block lg button ends -->

<!-- destructive xs button starts -->
<button class="c-btn c-btn--destructive c-btn--xs">destructive button</button>
<!-- destructive xs button ends -->

<!-- destructive sm button starts -->
<button class="c-btn c-btn--destructive c-btn--sm">destructive button</button>
<!-- destructive sm button ends -->

<!-- destructive button starts -->
<button class="c-btn c-btn--destructive">destructive button</button>
<!-- destructive button ends -->

<!-- destructive lg button starts -->
<button class="c-btn c-btn--destructive c-btn--lg">destructive button</button>
<!-- destructive lg button ends -->

<!-- disabled xs button starts -->
<button class="c-btn c-btn--disabled c-btn--xs">disabled button</button>
<!-- disabled xs button ends -->

<!-- disabled sm button starts -->
<button class="c-btn c-btn--disabled c-btn--sm">disabled button</button>
<!-- disabled sm button ends -->

<!-- disabled button starts -->
<button class="c-btn c-btn--disabled">disabled button</button>
<!-- disabled button ends -->

<!-- disabled lg button starts -->
<button class="c-btn c-btn--disabled c-btn--lg">disabled button</button>
<!-- disabled lg button ends -->

<!-- Icon left button starts -->
<button class="c-btn c-btn--icon"><svg class="o-icon" aria-hidden="true"><use href="#approval"></use></svg> Button with icon</button>
<!-- default button ends -->

<!-- Icon right button starts -->
<button class="c-btn c-btn--icon c-btn--icon--right c-btn--icon--right">Button with icon <svg class="o-icon" aria-hidden="true"><use href="#approval"></use></svg></button>
<!-- icon--right button ends -->


        {{#each button }}
<!-- {{#if mod }}{{ mod }} {{#if size }}{{ size }} {{/if}}{{else}}default {{#if size }}{{ size }} {{/if}}{{/if}}button starts -->
<button class="c-btn{{#if mod }} c-btn--{{ mod }}{{/if}}{{#if size }} c-btn--{{ size }}{{/if}}"{{#if disabled }} disabled {{/if}}>{{#if mod }}{{ mod }}{{else}}default{{/if}} button</button>
<!-- {{#if mod }}{{ mod }} {{#if size }}{{ size }} {{/if}}{{else}}default {{#if size }}{{ size }} {{/if}}{{/if}}button ends -->

{{/each}}

{{render '@buttons--iconl'}}

{{render '@buttons--iconr'}}


        
            
            {
  "button": [
    {
      "size": "xs"
    },
    {
      "size": "sm"
    },
    "default",
    {
      "size": "lg"
    },
    {
      "mod": "primary",
      "size": "xs"
    },
    {
      "mod": "primary",
      "size": "sm"
    },
    {
      "mod": "primary"
    },
    {
      "mod": "primary",
      "size": "lg"
    },
    {
      "mod": "outline",
      "size": "xs"
    },
    {
      "mod": "outline",
      "size": "sm"
    },
    {
      "mod": "outline"
    },
    {
      "mod": "outline",
      "size": "lg"
    },
    {
      "mod": "link",
      "size": "xs"
    },
    {
      "mod": "link",
      "size": "sm"
    },
    {
      "mod": "link"
    },
    {
      "mod": "link",
      "size": "lg"
    },
    {
      "mod": "block",
      "size": "xs"
    },
    {
      "mod": "block",
      "size": "sm"
    },
    {
      "mod": "block"
    },
    {
      "mod": "block",
      "size": "lg"
    },
    {
      "mod": "destructive",
      "size": "xs"
    },
    {
      "mod": "destructive",
      "size": "sm"
    },
    {
      "mod": "destructive"
    },
    {
      "mod": "destructive",
      "size": "lg"
    },
    {
      "mod": "disabled",
      "size": "xs"
    },
    {
      "mod": "disabled",
      "size": "sm"
    },
    {
      "mod": "disabled"
    },
    {
      "mod": "disabled",
      "size": "lg"
    }
  ]
}

File:

Content:


                                /*------------------------------------*\
  #BUTTONS
\*------------------------------------*/

/**
 * 1. Allow us to style box model properties.
 * 2. Reset/normalize some styles.
 * 3. Line different sized buttons up a little nicer.
 * 4. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 5. Force all button-styled elements to appear clickable.
 */

.c-btn {
  display: inline-block; /* [1] */
  min-width: rem(36);
  min-height: rem(36);
  padding: $space-sm $space-unit;
  border: rem(1) solid $color-btn-border;
  border-radius: $global-radius;
  background: $color-btn-background;
  box-shadow: $global-box-shadow--light;
  color: $color-btn;
  font: inherit; /* [3] */
  font-size: rem(14);
  font-weight: 600;
  text-align: center; /* [2] */
  text-decoration: none; /* [2] */
  vertical-align: middle; /* [4] */
  cursor: pointer; /* [5] */
  transition: $global-transition--fast;

  @include hocus() {
    background: $color-btn-background-hover;
    color: darken($color-btn, 10%);
    text-decoration: none;
  }

  &:focus {
  // box-shadow is invisible in Windows high-contrast mode, so we need to add a transparent outline, which actually does show up in high-contrast mode.
  outline: rem(2) dotted transparent;
  outline-offset: rem(2);
  // Adds a white border around the button, along with a blue glow. The white and blue have a color contrast ratio of at least 3:1, which means this will work against any background color.
  box-shadow: 0 0 0 rem(2) $color-white, 0 0 rem(3) rem(5) $color-brand-secondary-highlight;
  }

  &:active {
    padding-top: 1.08 * $space-sm;
    padding-bottom: 0.92 * $space-sm;
    box-shadow: $global-box-shadow__inset;
  }

  &::first-letter {
    text-transform: uppercase;
  }
}

// Size variations

.c-btn--xs {
  min-width: rem(16);
  min-height: rem(24);
  padding: $space-xxxs $space-xs;
  font-size: rem(12);
  font-weight: 500;

  &:active {
    padding-top: 1.08 * $space-xxxs;
    padding-bottom: 0.92 * $space-xxxs;
  }
}

.c-btn--sm {
  min-width: rem(16);
  min-height: rem(24);
  padding: $space-xs $space-sm;
  font-size: rem(13);
  font-weight: 500;

  &:active {
    padding-top: 1.08 * $space-xs;
    padding-bottom: 0.92 * $space-xs;
  }
}

.c-btn--lg {
  padding: $space-unit $space-md;
  font-size: rem(16);

  &:active {
    padding-top: 1.08 * $space-unit;
    padding-bottom: 0.92 * $space-unit;
  }
}


.c-btn--primary {
  border-color: $color-btn-primary-border;
  background: $color-btn-primary-background;
       color: $color-btn-primary;

  @include hocus() {
    background: $color-btn-primary-background-hover;
    color: $color-btn-primary;
  }

  &:active {
    border-color: $color-brand-secondary-700;
    background: $color-btn-primary-background-active;
    box-shadow: $global-box-shadow__inset--md;
    color: $color-btn-primary;
  }
}

.c-btn--outline {
  border: $space-unit * 0.08 solid currentColor;
  background: $color-btn-outline-background;
  box-shadow: none;
  color: $color-btn-outline;

  @include hocus() {
    background: $color-btn-outline-background-hover;
    color: darken($color-brand-secondary, 2%);
  }

  &.is-active,
  &:active,
  input:checked + & {
    border: rem(1.5) solid lighten($color-brand-secondary-700, 2%);
    background-color: lighten($color-brand-primary-100, 2%);
    color: $color-brand-secondary-700;
  }
}
  //////////////////////////////////////////////////////////
  // Radio or checkbox input with outline button style
  //////////////////////////////////////////////////////////
  .c-input--btn-outline {
    display: inline-block;
    align-self: center;

    input {
      display: none;

      &:checked + .c-btn--outline--fail {
        border-color: $color-danger-600;
        background-color: $color-danger-100;
        color: $color-danger-600;
      }

      &:checked + .c-btn--outline--success {
        border-color: $color-success-600;
        background-color: rgba($color-success-100, 0.8);
        color: $color-success-600;
      }
    }

    .c-btn {
      width: 100%;
    }

    > .c-btn--outline.c-btn--outline--fail {
      color: $color-danger-500;

      @include hocus() {
        background: rgba($color-danger-100, 0.4);
      }

      &.is-active,
      &:active,
      input:checked + & {
        border-color: $color-danger-600;
        background-color: rgba($color-danger-100, 0.8);
        color: $color-danger-600;
      }
    }

    > .c-btn--outline.c-btn--outline--success {
      color: $color-success-500;

      @include hocus() {
        background: rgba($color-success-100, 0.4);
      }

      &.is-active,
      &:active,
      input:checked + & {
        border-color: $color-success-600;
        background-color: rgba($color-success-100, 0.8);
        color: $color-success-600;
      }
    }
  }


.c-btn--link {
  position: relative;
  width: max-content;
  min-width: min-content;
  max-width: max-content;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: $color-link;

  @include acthocus() {
    text-underline-offset: $space-xxxs;
    border: 0;
    background: transparent;
    background: transparent;
    box-shadow: none;
    color: $color-link-hover;
    text-decoration: underline solid rem(1.5);
  }


  &.c-btn--link--no-underline {

    @include acthocus() {
      text-decoration: none;
    }
  }
}

.c-btn--block {
  display: block;
  width: 100%;
}

.c-btn--icon {
  display: inline-flex;
  align-items: center;
}

.c-btn--icon--right {

  .o-icon {
    margin: 0 0 0 $space-xxxs;
  }
}

.c-btn--destructive {
  border: $space-unit * 0.08 solid $color-btn-danger-border;
  background: $color-btn-danger-background;
       color: $color-btn-danger;

  @include hocus() {
    background: $color-btn-danger-background-hover;
    color: $color-btn-danger;
  }

  &:active {
    border-color: $color-danger-700;
    background: $color-btn-danger-background-active;
    box-shadow: $global-box-shadow__inset--md;
    color: $color-white;
  }
}

.c-btn--disabled,
button:disabled,
input:disabled {
  background-color: $color-grey-200;
             color: $color-grey-400;
  cursor: not-allowed;

  @include hocus() {
   background-color: $color-grey-200;
    color: $color-grey-400;
  }
}

.c-btn--sticky {
  position: sticky;
  top: 0;
  margin: -1.5rem 0 0 auto;
  z-index: 20;
  background: $color-danger-100;
  color: $color-danger-800;
  border: 0;
  align-self: center;

  @include hocus() {
    background: lighten($color-danger-100, 2%);
  }
}

.c-btn--plus-minus {
  position: absolute;
  width: $space-unit;
  height: $space-unit;
  fill: currentColor;
  margin: $space-xs;

  &:first-child {
  //  left: 0.75rem;
  }

  & + * + .c-btn--plus-minus {
    left: 5.5rem;
  }
}

.c-btn-pink {
  background-color: pink !important;
}

URL: /components/raw/buttons/_buttons.scss
Filesystem Path: components/_code-components/buttons/_buttons.scss
Size: 6.8 KB

Handle: @buttons--all
Variants (10): Default , Primary , Outline , Link Button , Block Button , Icon Button , Icon right Button , Destructive , Disabled , All buttons
Preview:
- With layout
- Component only
Filesystem Path: components/_code-components/buttons/buttons--all.hbs
References (2): @buttons--iconl, @buttons--iconr

There are no notes for this item.