Button

Ready

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Default -->
<button class="button " type="button" aria-label="button">
    I am a button
</button>


        
            <!-- Secondary -->
<button class="button button--secondary" type="button" aria-label="button">
    I am button secondary
</button>


        
            <!-- Light -->
<button class="button button--light" type="button" aria-label="button">
    I am button light
</button>


        
            <!-- Secondary Light -->
<button class="button button--secondary-light" type="button" aria-label="button">
    I am button secondary light
</button>


        
            <!-- Icon -->
<button class="button button--icon " type="button" aria-label="click to do something">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Compare</title>
    <use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>

</button>


        
            <!-- Rotate Icon -->
<button class="button button--icon button--rotate-icon" type="button" aria-label="Close">
        <svg
    class="icon button__icon modal__close-button-icon"
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>


        
            <!-- Icon Light -->
<button class="button button--icon button--icon-light" type="button" aria-label="button">
        <svg
    class="icon "
    
        role="img"
>
        <title>Angle down icon</title>
    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>

</button>


        
            <!-- Icon Fill -->
<button class="button button--icon button--icon-fill" aria=label "Add to wishlist">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>wishlist</title>
    <use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>

</button>


        
            <!-- Icon Border -->
<button class="button button--icon button--icon-border" type="button" aria-label="button">
        <svg
    class="icon "
    
        role="img"
>
        <title>Angle down icon</title>
    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>

</button>


        
            <!-- Icon Before -->
<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 xlink:href="/images/icons-sprite.svg#arrow-left"></use>
</svg>


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

</button>


        
            <!-- Icon After -->
<button class="button button--icon " type="button" aria-label="click to do something">

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

            <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Arrow Right</title>
    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>

</button>


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


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

</button>


        
            <!-- Icon After Light -->
<button class="button button--icon button--icon-light" type="button" aria-label="click to do something">

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

            <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Arrow Right</title>
    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>

</button>


        
            <!-- Add To -->
<button class="button button--add-to " type="button" aria-label="Add to cart">
        <span class="button__text ">
            Add to cart
        </span>

            <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Add to cart</title>
    <use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>

</button>


        
            <!-- Link -->
<a class="button button--link" href="#" title="I am a link button">
    I am a link button
</a>


        
            <!-- Fluid -->
<button class="button button--fluid" type="button" aria-label="button">
    I am a fluid button
</button>


        
            <!-- Disabled -->
<button class="button " disabled>
    I am a disabled button
</button>


        <!-- Default -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>

<!-- Secondary -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>

<!-- Light -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>

<!-- Secondary Light -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>

<!-- Icon -->
<{{{ 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 }}}>

<!-- Rotate Icon -->
<{{{ 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 }}}>

<!-- Icon Light -->
<{{{ 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 }}}>

<!-- Icon Fill -->
<{{{ 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 }}}>

<!-- Icon Border -->
<{{{ 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 }}}>

<!-- Icon Before -->
<{{{ 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 }}}>

<!-- Icon After -->
<{{{ 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 }}}>

<!-- Icon Before Light -->
<{{{ 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 }}}>

<!-- Icon After Light -->
<{{{ 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 }}}>

<!-- Add To -->
<{{{ tag }}} class="button button--add-to {{ class }}" {{{ attributes }}}>
    {{#if text }}
        <span class="button__text {{ textClass }}">
            {{{ text }}}
        </span>

        {{#if icon }}
            {{ render '@icon' icon }}
        {{/if}}
    {{else}}
        {{ render '@icon' icon }}
    {{/if}}
</{{{ tag }}}>

<!-- Link -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>

<!-- Fluid -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>

<!-- Disabled -->
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
    {{{ text }}}
</{{{ tag }}}>


        
        
            /* Default */
{
  "tag": "button",
  "class": "",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": "I am a button"
}


        
            /* Secondary */
{
  "tag": "button",
  "class": "button--secondary",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": "I am button secondary"
}


        
            /* Light */
{
  "tag": "button",
  "class": "button--light",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": "I am button light"
}


        
            /* Secondary Light */
{
  "tag": "button",
  "class": "button--secondary-light",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": "I am button secondary light"
}


        
            /* Icon */
{
  "tag": "button",
  "class": "",
  "attributes": "type=\"button\" aria-label=\"click to do something\"",
  "text": "",
  "icon": {
    "id": "arrow-left",
    "title": "Arrow left",
    "class": "button__icon",
    "hidden": true
  }
}


        
            /* Rotate Icon */
{
  "tag": "button",
  "class": "button--rotate-icon",
  "attributes": "type=\"button\" aria-label=\"Close\"",
  "text": "",
  "icon": {
    "id": "close",
    "title": "Close",
    "class": "button__icon",
    "hidden": true
  }
}


        
            /* Icon Light */
{
  "tag": "button",
  "class": "button--icon-light",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": ""
}


        
            /* Icon Fill */
{
  "tag": "button",
  "class": "button--icon-fill",
  "attributes": "aria=label\"Add to wishlist\"",
  "text": "",
  "icon": {
    "id": "heart",
    "title": "wishlist",
    "class": "button__icon",
    "hidden": true
  }
}


        
            /* Icon Border */
{
  "tag": "button",
  "class": "button--icon-border",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": ""
}


        
            /* Icon Before */
{
  "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
  }
}


        
            /* Icon After */
{
  "tag": "button",
  "class": "",
  "attributes": "type=\"button\" aria-label=\"click to do something\"",
  "text": "Button Icon after",
  "iconAfter": {
    "id": "arrow-right",
    "title": "Arrow Right",
    "class": "button__icon",
    "hidden": true
  }
}


        
            /* Icon Before Light */
{
  "tag": "button",
  "class": "button--icon-light",
  "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
  }
}


        
            /* Icon After Light */
{
  "tag": "button",
  "class": "button--icon-light",
  "attributes": "type=\"button\" aria-label=\"click to do something\"",
  "text": "Button Icon after",
  "iconAfter": {
    "id": "arrow-right",
    "title": "Arrow Right",
    "class": "button__icon",
    "hidden": true
  }
}


        
            /* Add To */
{
  "tag": "button",
  "class": "",
  "attributes": "type=\"button\" aria-label=\"Add to cart\"",
  "text": "Add to cart",
  "icon": {
    "id": "shopping-cart",
    "title": "Add to Cart",
    "class": "button__icon",
    "hidden": true
  }
}


        
            /* Link */
{
  "tag": "a",
  "class": "button--link",
  "attributes": "href=\"#\" title=\"I am a link button\"",
  "text": "I am a link button"
}


        
            /* Fluid */
{
  "tag": "button",
  "class": "button--fluid",
  "attributes": "type=\"button\" aria-label=\"button\"",
  "text": "I am a fluid button"
}


        
            /* Disabled */
{
  "tag": "button",
  "class": "",
  "attributes": "disabled",
  "text": "I am a disabled button"
}

File:

Content:


                                $button__min-size                               : 48px !default;
$button__padding                                : 0 $spacer--large !default;
$button__background                             : $theme-primary !default;
$button__background-hover                       : $theme-primary !default;
$button__border                                 : none !default;
$button__border-radius                          : $border-radius !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-base !default;
$button__line-height                            : 1 !default;
$button__text-color                             : $white !default;
$button__text-transform                         : none !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                         : none !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                          : none !default;
$button__after-content                          : none !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            : $black !default;
$button__before-z-index-hover--secondary        : -1 !default;
$button__after-display-hover--secondary         : none !default;

// Secondary light
$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                      : $theme-second !default;
$button__background-hover--link                 : transparent !default;
$button__before-display-hover--link             : none !default;
$button__after-display-hover--link              : none !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                  : $theme-dark !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                 : $theme-second !default;
$button__font-weight--icon                      : $font-weight-normal !default;
$button__text-transform--icon                   : none !default;
$button__background-hover--icon                 : $gray-light !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-content-icon--add-to             : none !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             : none !default;

$button__background--icon-fill                  : transparent !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-before:before {
    content: $button__before-content;
    // sass-lint:disable no-important
    display: $button__before-display !important;
    // sass-lint:enable no-important
    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;
}

%button-after:after {
    content: $button__after-content;
    // sass-lint:disable no-important
    display: $button__after-display !important;
    // sass-lint:enable no-important
    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;
}

URL: /components/raw/button/_button-variables.scss
Filesystem Path: build/components/Molecules/button/_button-variables.scss
Size: 9.2 KB

Content:


                                @import 'button-variables';

.button {
    @extend %button-before;
    @extend %button-after;

    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 {
        background-color: $button__background-hover;
        text-decoration: $button__text-decoration-hover;
        opacity: 0.9;
        &:before {
            display: $button__before-display-hover;
            transform: $button__before-transform-hover;
            border-radius: $border-radius;
        }

        &: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 {
            background-color: $button__background-disabled;

            //&:before,
            //&:after {
            //    display: none;
            //}
        }
    }

    &--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 {
            color: $button__color-hover--secondary;
            background-color: $button__background-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 {
            color: $button__color-hover--link;
            background: $button__background-hover--link;
            //&:before {
            //    display: $button__before-display-hover--link;
            //}
            //&:after {
            //    display: $button__after-display-hover--link;
            //}
        }
    }

    &--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 {
            background-color: $button__background-hover--icon !important; //sass-lint:disable-line no-important
            //&: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 {
            //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 {
            background-color: $button__background-hover--icon-border;
            border: $button__border-hover--icon-border;
        }
    }

    &--rotate-icon {
        &:before {
            background-color: $button__before-background--rotate-icon;
        }
        &:hover {
            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;

        &:before {
            background-color: $button__before-background--icon-fill;
            z-index: $button__icon-after-z-index--icon-fill;
        }

        &:hover {
            @include button-fill-bg();

            background-color: $button__background-hover--icon-fill;
        }
    }

    &--icon-filled {
        @include button-fill-bg();
    }

    &--add-to {
        overflow: hidden;
        @include add-to-button(block);
        @include mq($screen-m) {
            @include add-to-button(none);
        }

        &:before {
            display: $button__before-display--add-to;
        }

        &:after {
            top: $button__after-position-top--add-to;
            left: $button__after-position-left--add-to;
            transform: $button__after-transform--add-to;
        }

        .button__icon {
            fill: $white;
        }

        //&:hover {
        //    &:after {
        //        transform: $button__after-transform-hover--add-to;
        //    }
        //}
    }
    &--no-hover-bg {
        &:hover {
            background-color: #fff;
            opacity: 1;

            .icon,
            .button__icon {
                fill: $button__text-color--icon;
            }
            .button__text {
                color: $button__text-color--icon;
            }
        }
    }
    &--dark {
        background-color: #555;
        .icon,
        .button__icon {
            fill: #fff;
        }
        .button__text {
            color: #fff;
        }
        &:hover {
            background-color: #555;
            opacity: 1;

            .icon,
            .button__icon {
                fill: #fff;
            }
            .button__text {
                color: #fff;
            }
        }
    }
}

//use .button-extend for wrappers that contains buttons without .button class that should have .button styles
.button-extend {
    [type="button"],
    [type="submit"] {
        @extend .button;
    }
}

URL: /components/raw/button/_button.scss
Filesystem Path: build/components/Molecules/button/_button.scss
Size: 7.5 KB

Handle: @button
Variants (17): Default , Secondary , Light , Secondary Light , Icon , Rotate Icon , Icon Light , Icon Fill , Icon Border , Icon Before , Icon After , Icon Before Light , Icon After Light , Add To , Link , Fluid , Disabled
Preview:
- With layout
- Component only
Filesystem Path: build/components/Molecules/button/button.hbs
Referenced by (89): @file-upload, @select--with-button, @modal-trigger, @account-form, @account-form--registration, @actions-group, @quote-form, @chat, @shipping-address, @dashboard-actions-toolbar, @dashboard-nav, @hero--location, @hero--secondary, @minicart-content, @minicart-product, @newsletter, @newsletter--footer, @order-summary, @order-summary--checkout, @order-summary--with-quote, @product-grid-item--wishlist, @product-list-item, @product-list-item--special-price, @product-list-item--description, @range, @review--add, @sidebar-block, @sidebar-block--wishlist, @sidebar-block--recently-ordered, @sidebar-block--recently-viewed, @tooltip, @tooltip--text, @my-quotes, @cart, @cart--b2b, @compare, @contact-us, @gift-registry--share, @invitations--send, @wishlist, @wishlist--management, @email-to-friend, @forgot-password, @paypal-review, @product-view, @product-view--bundle, @product-view--grouped, @product-view--ee, @no-results, @hero, @product-review, @add-to-cart, @banner--category, @cart-list-item, @category-grid-item, @category-grid-item--special-price, @category-grid-item--wishlist, @category-grid-item--slider-item, @category-grid-item--ee, @shipping-information, @filters, @footer, @footer--checkout, @gallery, @gallery--horizontal, @gallery--dots-breakpoint, @header, @header--with-quicksearch, @header--checkout, @more-info, @product-grid-item, @product-grid-item--special-price, @product-grid-item--slider-item, @product-grid-item--ee, @quantity-update, @quantity-update--full, @side-menu, @slider, @slider--loader-visible, @slider--products, @slider--brands, @toolbar, @toolbar--secondary, @marketing-bar, @modal, @modal--secondary, @modal--tertiary, @quicksearch, @404

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.