<button class="button button--icon " type="button" aria-label="click to do something">
    <svg class="icon button__icon" role="presentation" focusable="false">
        <title>Arrow left</title>
        <use href="/images/icons-sprite.svg#arrow-left"></use>
    </svg>

    <span class="button__text ">
        Button Icon before
    </span>

</button>
<{{{ tag }}} class="button button--icon {{ class }}" {{{ attributes }}}>
    {{#if text }}
        {{#if iconBefore }}
            {{ render '@icon' iconBefore }}
        {{/if}}

        <span class="button__text {{ textClass }}">
            {{{ text }}}
        </span>

        {{#if iconAfter }}
            {{ render '@icon' iconAfter }}
        {{/if}}
    {{else}}
        {{ render '@icon' icon }}
    {{/if}}
</{{{ tag }}}>
{
  "tag": "button",
  "class": "",
  "attributes": "type=\"button\" aria-label=\"click to do something\"",
  "text": "Button Icon before",
  "iconBefore": {
    "id": "arrow-left",
    "title": "Arrow left",
    "class": "button__icon",
    "hidden": true
  }
}
  • Content:
    $button__min-size                               : 48px !default;
    $button__padding                                : 0 $spacer--large !default;
    $button__background                             : $color-primary !default;
    $button__background-hover                       : initial !default;
    $button__border                                 : none !default;
    $button__border-radius                          : 0 !default;
    $button__outline                                : $outline-base !default;
    $button__font-family                            : $font-family-base !default;
    $button__font-size                              : $font-size-base !default;
    $button__font-weight                            : $font-weight-bold !default;
    $button__line-height                            : 1 !default;
    $button__text-color                             : $white !default;
    $button__text-transform                         : uppercase !default;
    $button__text-decoration                        : none !default;
    $button__text-decoration-hover                  : none !default;
    $button__transform                              : perspective(1px) translateZ(0) !default;
    $button__transition                             : all 0.5s ease-in-out !default;
    
    // before used in hover state
    $button__before-display                         : block !default;
    $button__before-content                         : '' !default;
    $button__before-width                           : 100% !default;
    $button__before-position-left                   : 0 !default;
    $button__before-position-top                    : 0 !default;
    $button__before-position-bottom                 : 0 !default;
    $button__before-background                      : $color-primary !default;
    $button__before-transform                       : scaleX(0) !default;
    $button__before-transform-origin                : 0 50% !default;
    
    // before hover
    $button__before-transform-hover                 : scaleX(1) !default;
    $button__before-display-hover                   : block !default;
    
    // after used in hover state
    $button__after-display                          : block !default;
    $button__after-content                          : url("../images/icons/arrow-right-light.svg") !default;
    $button__after-position-left                    : 20% !default;
    $button__after-position-top                     : 50% !default;
    $button__after-z-index                          : 1 !default;
    $button__after-opacity                          : 0 !default;
    $button__after-transform                        : translateY(-50%) !default;
    $button__after-transform-origin                 : center !default;
    
    // after hover
    $button__after-display-hover                    : block !default;
    $button__after-position-left-hover              : calc(50% - 12px) !default;
    $button__after-opacity-hover                    : 1 !default;
    
    // disabled
    $button__background-disabled                    : $gray !default;
    
    // Secondary
    $button__color--secondary                       : $color-primary !default;
    $button__background--secondary                  : $white !default;
    $button__border--secondary                      : 2px solid $button__color--secondary !default;
    
    // Secondary hover
    $button__color-hover--secondary                 : $white !default;
    $button__background-hover--secondary            : $white !default;
    $button__before-z-index-hover--secondary        : -1 !default;
    $button__after-display-hover--secondary         : none !default;
    
    // Secondary light
    $button__text-transform--light                  : none !default;
    $button__font-weight--light                     : $font-weight-normal !default;
    $button__text-transform--light                  : none !default;
    
    // Button Link
    $button__color--link                            : $color-primary !default;
    $button__background--link                       : transparent !default;
    $button__text-transform--link                   : none !default;
    $button__text-decoration--link                  : underline !default;
    
    // Button Link hover
    $button__color-hover--link                      : $blue !default;
    $button__background-hover--link                 : transparent !default;
    $button__before-display-hover--link             : none !default;
    $button__after-display-hover--link              : none !default;
    
    // Button Link Secondary
    $button__color--link-secondary                  : $color-primary !default;
    $button__background--link-secondary             : transparent !default;
    $button__text-transform--link-secondary         : none !default;
    $button__text-decoration--link-secondary        : none !default;
    $button__border--link-secondary                 : none !default;
    $button__cursor--link-secondary                 : pointer !default;
    $button__padding--link-secondary                : 0 !default;
    $button__line-height--link-secondary            : 1.6 !default;
    $button__font-family--link-secondary            : $font-family-base !default;
    
    // Button Link Secondary Hover
    $button__color-hover--link-secondary            : $blue !default;
    $button__background-hover--link-secondary       : transparent !default;
    $button__before-display-hover--link-secondary   : none !default;
    $button__after-display-hover--link-secondary    : none !default;
    $button__text-decoration-hover--link-secondary  : underline !default;
    
    // Button icon
    $button__padding--icon                          : 0 $spacer !default;
    $button__icon-size                              : 24px !default;
    $button__icon-fill                              : $color-primary !default;
    $button__icon-transition                        : $transition-base !default;
    $button__icon-fill-hover--icon                  : $white !default;
    $button__bg--icon                               : $white !default;
    $button__icon-z-index                           : $z-index-low !default;
    $button__text-margin--icon                      : 0 $spacer !default;
    $button__text-z-index                           : $z-index-low !default;
    $button__text-color--icon                       : $color-primary !default;
    $button__text-color-hover--icon                 : $white !default;
    $button__font-weight--icon                      : $font-weight-normal !default;
    $button__text-transform--icon                   : none !default;
    $button__background-hover--icon                 : initial !default;
    
    // Button icon light
    $button__icon-fill-hover--icon-light            : $color-primary !default;
    $button__before-background--icon-light          : $gray-light !default;
    $button__text-color-hover--icon-light           : $color-primary !default;
    $button__background-hover--icon-light           : initial !default;
    
    // Button icon border
    $button__border--icon-border                    : $border-width-base $border-style-base $color-primary !default;
    $button__border-hover--icon-border              : $button__border--icon-border !default;
    $button__background--icon-border                : $button__bg--icon !default;
    $button__background-hover--icon-border          : $button__background-hover--icon !default;
    
    // Button rotate-icon
    $button__icon-fill-hover--rotate-icon           : $color-primary !default;
    $button__transform-hover--rotate-icon           : rotate(180deg) !default;
    $button__before-background--rotate-icon         : $gray-light !default;
    $button__background-hover--rotate-icon          : initial !default;
    
    // Button add-to
    // icon & text
    $button__icon-display--add-to                   : block !default;
    $button__icon-display--add-to\@medium           : none !default;
    $button__text-display--add-to                   : none !default;
    $button__text-display--add-to\@medium           : block !default;
    $button__before-display--add-to                 : block !default;
    $button__after-display--add-to                  : none !default;
    $button__after-display--add-to\@large           : block !default;
    $button__after-content-icon--add-to             : url("../images/icons/plus-light.svg") !default;
    $button__after-position-left--add-to            : calc(50% - 12px) !default;
    $button__after-position-top--add-to             : auto !default;
    $button__after-transform--add-to                : translateX(-150%) !default;
    $button__after-transform-hover--add-to          : translateY(0) !default;
    $button__after-content-text--add-to             : url("../images/icons/shopping-cart-light.svg") !default;
    $button__background-hover--add-to               : $color-primary !default;
    $button__before-display-hover--add-to           : none !default;
    $button__before-display-hover--add-to\@large    : block !default;
    $button__after-display-hover--add-to            : none !default;
    $button__after-display-hover--add-to\@large     : block !default;
    
    $button__background--icon-fill                  : transparent !default;
    $button__icon-after-mask--icon-fill             : '../images/icons/heart-fill.svg' !default;
    $button__icon-after-mask-repeat--icon-fill      : no-repeat !default;
    $button__icon-after-mask-position--icon-fill    : center / cover !default;
    $button__icon-after-bg-size--icon-fill          : 400% 400% !default;
    $button__icon-after-bg-image--icon-fill         : linear-gradient(to right, $color-primary 50%, transparent 50%) !default;
    $button__icon-after-bg-position--icon-fill      : 100% 100% !default;
    $button__icon-after-bg-position-hover--icon-fill: 0 100% !default;
    $button__icon-after-transition--icon-fill       : background 0.5s linear !default;
    $button__icon-after-z-index--icon-fill          : -1 !default;
    $button__icon-after-oapcity--icon-fill          : 1 !default;
    $button__icon-fill-hover--icon-fill             : $color-primary !default;
    $button__before-background--icon-fill           : transparent !default;
    $button__background-hover--icon-fill            : initial !default;
    $button__icon-fill--add-to                      : $white !default;
    
  • URL: /components/raw/button/_button-variables.scss
  • Filesystem Path: build/components/Molecules/button/_button-variables.scss
  • Size: 9.7 KB
  • Content:
    @import 'button-variables';
    
    .button {
        &:before {
            content: $button__before-content;
            display: $button__before-display;
            position: absolute;
            width: $button__before-width;
            left: $button__before-position-left;
            top: $button__before-position-top;
            bottom: $button__before-position-bottom;
            background-color: $button__before-background;
            transform: $button__before-transform;
            transform-origin: $button__before-transform-origin;
            transition: $button__transition;
            pointer-events: none;
        }
    
        &:after {
            content: $button__after-content;
            display: $button__after-display;
            position: absolute;
            left: $button__after-position-left;
            top: $button__after-position-top;
            width: $button__icon-size;
            height: $button__icon-size;
            padding: $icon-padding ;
            z-index: $button__after-z-index;
            opacity: $button__after-opacity;
            transform: $button__after-transform;
            transform-origin: $button__after-transform-origin;
            transition: $button__transition;
            pointer-events: none;
        }
    
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    
        min-height: $button__min-size;
        min-width: $button__min-size;
        padding: $button__padding;
    
        background-color: $button__background;
        border: $button__border;
        border-radius: $button__border-radius;
        outline: $button__outline;
    
        font-family: $button__font-family;
        font-size: $button__font-size;
        font-weight: $button__font-weight;
        line-height: $button__line-height;
        color: $button__text-color;
    
        cursor: pointer;
    
        text-transform: $button__text-transform;
        text-decoration: $button__text-decoration;
        transform: $button__transform;
        transition: $button__transition;
    
        &:hover,
        &.focus-visible {
            background-color: $button__background-hover;
            text-decoration: $button__text-decoration-hover;
    
            &:before {
                display: $button__before-display-hover;
                transform: $button__before-transform-hover;
            }
    
            &:after {
                display: $button__after-display-hover;
                left: $button__after-position-left-hover;
                opacity: $button__after-opacity-hover;
            }
        }
    
        &:disabled,
        &[disabled] {
            background-color: $button__background-disabled;
            border-color: $button__background-disabled;
            color: $button__text-color;
            cursor: not-allowed;
    
            .icon {
                fill: $button__text-color;
            }
    
            &:hover,
            &.focus-visible {
                background-color: $button__background-disabled;
    
                &:before,
                &:after {
                    display: none;
                }
            }
        }
    
        &--light {
            text-transform: $button__text-transform--light;
            font-weight: $button__font-weight--light;
            text-transform: $button__text-transform--light;
        }
    
        &--secondary {
            color: $button__color--secondary;
            background-color: $button__background--secondary;
            border: $button__border--secondary;
    
            &:hover,
            &.focus-visible {
                color: $button__color-hover--secondary;
                background-color: $button__background-hover--secondary;
                &:before {
                    z-index: $button__before-z-index-hover--secondary;
                }
                &:after {
                    display: $button__after-display-hover--secondary;
                }
            }
    
            &.action {
                &:hover,
                &.focus-visible {
                    &:after {
                        display: $button__after-display-hover--secondary;
                    }
                }
            }
        }
    
        &--secondary-light {
            @extend .button--secondary;
            @extend .button--light;
        }
    
        &--fluid {
            width: 100%;
        }
    
        &--link {
            color: $button__color--link;
            background: $button__background--link;
            text-transform: $button__text-transform--link;
            text-decoration: $button__text-decoration--link;
    
            &:hover,
            &.focus-visible {
                color: $button__color-hover--link;
                background: $button__background-hover--link;
                &:before {
                    display: $button__before-display-hover--link;
                }
                &:after {
                    display: $button__after-display-hover--link;
                }
            }
        }
    
        &--link-secondary {
            color: $button__color--link-secondary;
            background: $button__background--link-secondary;
            text-transform: $button__text-transform--link-secondary;
            text-decoration: $button__text-decoration--link-secondary;
            border: $button__border--link-secondary;
            cursor: $button__cursor--link-secondary;
            padding: $button__padding--link-secondary;
            line-height: $button__line-height--link-secondary;
            font-family: $button__font-family--link-secondary;
    
            &:hover,
            &.focus-visible {
                color: $button__color-hover--link-secondary;
                background: $button__background-hover--link-secondary;
                text-decoration: $button__text-decoration-hover--link-secondary;
                &:before {
                    display: $button__before-display-hover--link-secondary;
                }
                &:after {
                    display: $button__after-display-hover--link-secondary;
                }
            }
        }
    
        &--icon {
            min-width: $button__min-size;
            min-height: $button__min-size;
            padding: $button__padding--icon;
            background-color: $button__bg--icon;
    
            .icon,
            .button__icon {
                width: $button__icon-size;
                height: $button__icon-size;
                padding: $icon-padding ;
                fill: $button__icon-fill;
                transition: $button__icon-transition;
                z-index: $button__icon-z-index;
                pointer-events: none;
            }
    
            .button__text {
                margin: $button__text-margin--icon;
                color: $button__text-color--icon;
                font-weight: $button__font-weight--icon;
                text-transform: $button__text-transform--icon;
                transition: $button__transition;
                z-index: $button__text-z-index;
                pointer-events: none;
            }
    
            &:hover,
            &.focus-visible {
                background-color: $button__background-hover--icon;
                &:after {
                    display: none;
                }
                .icon,
                .button__icon {
                    fill: $button__icon-fill-hover--icon;
                }
                .button__text {
                    color: $button__text-color-hover--icon;
                }
            }
        }
    
        &--icon-light {
            &:before {
                background-color: $button__before-background--icon-light;
            }
            &:hover,
            &.focus-visible {
                background-color: $button__background-hover--icon-light;
                .icon,
                .button__icon {
                    fill: $button__icon-fill-hover--icon-light;
                }
                .button__text {
                    color: $button__text-color-hover--icon-light;
                }
            }
        }
    
        &--icon-border {
            border: $button__border--icon-border;
            background-color: $button__background--icon-border;
    
            &:hover,
            &.focus-visible {
                background-color: $button__background-hover--icon-border;
                border: $button__border-hover--icon-border;
            }
        }
    
        &--rotate-icon {
            &:before {
                background-color: $button__before-background--rotate-icon;
            }
    
            &:hover,
            &.focus-visible {
                background-color: $button__background-hover--rotate-icon;
                &:after {
                    display: none;
                }
    
                .icon {
                    fill: $button__icon-fill-hover--rotate-icon;
                    transform: $button__transform-hover--rotate-icon;
                }
            }
        }
    
        &--icon-fill {
            background: $button__background--icon-fill;
    
            &:after {
                content: '';
                display: block;
                position: absolute;
                left: auto;
                mask: url($button__icon-after-mask--icon-fill) $button__icon-after-mask-repeat--icon-fill $button__icon-after-mask-position--icon-fill;
                background-size: $button__icon-after-bg-size--icon-fill;
                background-image: $button__icon-after-bg-image--icon-fill;
                background-position: $button__icon-after-bg-position--icon-fill;
                transition: $button__icon-after-transition--icon-fill;
                opacity: $button__icon-after-oapcity--icon-fill;
                z-index: $button__icon-after-z-index--icon-fill;
            }
    
    
            &:before {
                background-color: $button__before-background--icon-fill;
                z-index: $button__icon-after-z-index--icon-fill;
            }
    
            &:hover,
            &.focus-visible {
                background-color: $button__background-hover--icon-fill;
    
                .icon {
                    fill: $button__icon-fill-hover--icon-fill;
                }
                &:after {
                    display: block;
                    background-position: $button__icon-after-bg-position-hover--icon-fill;
                }
            }
        }
    
        &--icon-filled {
            .icon {
                fill: $button__icon-fill-hover--icon-fill;
            }
            &:after {
                display: block;
                background-position: $button__icon-after-bg-position-hover--icon-fill;
            }
        }
    
        &--add-to {
            overflow: hidden;
            @include add-to-button(block);
    
            &:before {
                display: $button__before-display--add-to;
            }
    
            &:after {
                display: $button__after-display--add-to;
                top: $button__after-position-top--add-to;
                left: $button__after-position-left--add-to;
                transform: $button__after-transform--add-to;
            }
    
            &:hover,
            &.focus-visible {
                background-color: $button__background-hover--add-to;
    
                &:before {
                    display: $button__before-display-hover--add-to;
                }
    
                &:after {
                    display: $button__after-display-hover--add-to;
                    transform: $button__after-transform-hover--add-to;
                }
            }
    
            .button__icon {
                fill: $button__icon-fill--add-to;
            }
    
            @include mq($screen-m) {
                @include add-to-button(none);
            }
    
            @include mq($screen-l) {
                &:after {
                    display: $button__after-display--add-to\@large;
                }
    
                &:hover,
                &.focus-visible {
                    &:before {
                        display: $button__before-display-hover--add-to\@large;
                    }
    
                    &:after {
                        display: $button__after-display-hover--add-to\@large;
                    }
                }
            }
        }
    }
    
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: build/components/Molecules/button/_button.scss
  • Size: 11 KB

Button components

Variants:

  • Button Default
  • Button Secondary button--secondary
  • Button Secondary Light button--secondary-light
  • Button Icon button--icon
  • Button Icon Light button--icon button--icon-light
  • Button Icon Fill button--icon button--icon-border
  • Button Icon Rotate button--icon button--icon-rotate - mostly used for button icon close
  • Button Icon Fill button--icon button--icon-fill - used for wishlist button
  • Button Icon Add to cart button--icon button--add-to
  • Button Link button--link
  • Button Fluid button--fluid - 100% width
  • button[disabled]

To every button--icon we can add the text - it should be inside the span with class button__text, checkout components/Molecules/button/button--icon.hbs for more details.

Accessibility notice for buttons

IMPORTANT! All buttons that don’t have text inside (labels) and have only graphic representation, usage or aria-label or aria-labelledby is mandatory! Text inside aria label should be informative and should explain what the button is for.