<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Large Button</span>
    </span>
</button>
{%- if href -%}
<!-- LINK AS BUTTON Component -->
<a class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if active %} kx-is-active{% endif %}{% if state %} kx-is-{{ state }}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% if disabled %} kx-is-disabled{% endif %}"{% if disabled %} tabindex="-1"{% endif %}{% for data_attr in data %} data-{{ data_attr }}{% endfor %} href="{{ href }}"{% if ariaLabelledBy %} aria-labelledby="{{ ariaLabelledBy }}"{% endif %}{% if hideText %} aria-label="{{ text }}"{% endif%}>
    <span class="kx-btn__inner">
    {%- if icon %}
        {% if iconAfter -%}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {% render '@icon', icon, true %}
        {%- else -%}
        {% render '@icon', icon, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {%- endif -%}
    {%- elseif state=='processing' %}
        {% render '@process', process, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- endif %}
    </span>
</a>

{%- else -%}
<!-- BUTTON Component -->
<button class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if active %} kx-is-active{% endif %}{% if state %} kx-is-{{ state }}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}"{% for data_attr in data %} data-{{ data_attr }}{% endfor %}{{ 'disabled="disabled"' if disabled }}{% if ariaLabelledBy %} aria-labelledby="{{ ariaLabelledBy }}"{% endif %}{% if hideText %} aria-label="{{ text }}"{% endif%}>
    <span class="kx-btn__inner">
    {%- if icon %}
        {% if iconAfter -%}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {% render '@icon', icon, true %}
        {%- else -%}
        {%- render '@icon', icon, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {%- endif %}
    {%- elseif state=='processing' %}
        {% render '@process', process, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- endif %}
    </span>
</button>
{%- endif -%}
{
  "href": null,
  "text": "Large Button",
  "classes": null,
  "state": null,
  "icon": null,
  "iconAfter": null,
  "hideText": null,
  "disabled": null,
  "active": null,
  "skin": "primary",
  "size": "large",
  "data": null,
  "ariaLabelledBy": null
}
  • Content:
    // ==========================================================================
    // Component: button
    // ==========================================================================
    
    $border-radius-btn: $radius-global;
    
    // Elements (children)
    // ==========================================================================
    .kx-btn__txt {
        color: inherit;
        white-space: nowrap;
    }
    
    // Fix for http://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-element-in-some-browsers
    .kx-btn__inner {
        @include flex;
        @include align-items-center;
        @include justify-content-center;
        flex: 1 1 auto;
        width: 100%;
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-btn {
        @include inline-flex;
        @include align-items-center;
        transition: all $duration-instant ease-in-out;
        position: relative;
        width: fit-content;
        border: 0;
        color: inherit;
    
        .kx-icon,
        .kx-btn__txt {
            display: inline-block;
            vertical-align: middle;
        }
    
        .kx-icon {
            + .kx-btn__txt {
                @include ml(mini);
            }
        }
    
        .kx-btn__txt:not(.kx-is-vishidden) {
            + .kx-icon {
                @include ml(mini);
            }
        }
    
        &:focus,
        &.kx-is-focus {
            box-shadow: inset 0 0 0 rem-calc(2) currentColor;
            outline: 0;
        }
    
        &:hover,
        &.kx-is-hover {
            z-index: 1;
            box-shadow: none;
        }
    
        &:not(.kx-btn--skin-link) {
            &:hover,
            &.kx-is-hover {
                cursor: pointer;
            }
        }
    
        &:hover,
        &:active,
        &.kx-is-hover,
        &.kx-is-active {
            box-shadow: none;
        }
    
        &:disabled,
        &.kx-is-disabled {
            cursor: not-allowed !important;
        }
    
        &.kx-is-processing {
            .kx-process {
                .path {
                    stroke: currentColor;
                }
            }
        }
    }
    
    // If button is an <a>-tag, we remove text-decoration
    a.kx-btn {
        text-decoration: none;
    }
    
    // Modifiers
    // ==========================================================================
    
    // Width
    .kx-btn--fluid {
        flex: 1 1 auto;
        width: 100%;
    }
    
    // Size
    .kx-btn--size-tiny {
        @include type-scale(tiny);
        @include p(nano, mini, nano, mini);
    
        &.kx-btn--icon {
            &:not(.kx-btn--skin-link) {
                // 14px x 14px
                .kx-icon--size-tiny {
                    margin: rem-calc(6);
                }
    
                // 16px x 16px
                .kx-icon--size-small {
                    margin: rem-calc(5);
                }
    
                // 18px x 18px
                .kx-icon--size-base {
                    margin: rem-calc(3);
                }
    
                // 24px x 24px
                .kx-icon--size-moderate {
                    margin: rem-calc(0);
                }
            }
    
            &.kx-btn--skin-link {
                // 14px x 14px
                .kx-icon--size-tiny {
                    margin: rem-calc(5 0);
                }
    
                // 16px x 16px
                .kx-icon--size-small {
                    margin: rem-calc(4 0);
                }
    
                // 18px x 18px
                .kx-icon--size-base {
                    margin: rem-calc(3 0);
                }
    
                // 24px x 24px
                .kx-icon--size-moderate {
                    margin: rem-calc(0 0);
                }
            }
        }
    }
    
    .kx-btn--size-base {
        @include type-scale(small);
        @include px(small);
        padding-top: rem-calc(6);
        padding-bottom: rem-calc(6);
    
        &.kx-btn--icon {
            &:not(.kx-btn--skin-link) {
                // 14px x 14px
                .kx-icon--size-tiny {
                    margin: rem-calc(10);
                }
    
                // 16px x 16px
                .kx-icon--size-small {
                    margin: rem-calc(9);
                }
    
                // 18px x 18px
                .kx-icon--size-base {
                    margin: rem-calc(7);
                }
    
                // 24px x 24px
                .kx-icon--size-moderate {
                    margin: rem-calc(4);
                }
            }
    
            &.kx-btn--skin-link {
                // 14px x 14px
                .kx-icon--size-tiny {
                    margin: rem-calc(9 0);
                }
    
                // 16px x 16px
                .kx-icon--size-small {
                    margin: rem-calc(16 0);
                }
    
                // 18px x 18px
                .kx-icon--size-base {
                    margin: rem-calc(7 0);
                }
    
                // 24px x 24px
                .kx-icon--size-moderate {
                    margin: rem-calc(4 0);
                }
            }
        }
    }
    
    .kx-btn--size-large {
        @include type-scale(base);
        @include px(moderate, moderate);
        padding-top: rem-calc(10);
        padding-bottom: rem-calc(10);
    
        &.kx-btn--icon {
            &:not(.kx-btn--skin-link) {
                // 14px x 14px
                .kx-icon--size-tiny {
                    margin: rem-calc(16);
                }
    
                // 16px x 16px
                .kx-icon--size-small {
                    margin: rem-calc(15);
                }
    
                // 18px x 18px
                .kx-icon--size-base {
                    margin: rem-calc(13);
                }
    
                // 24px x 24px
                .kx-icon--size-moderate {
                    margin: rem-calc(10);
                }
            }
    
            &.kx-btn--skin-link {
                // 14px x 14px
                .kx-icon--size-tiny {
                    margin: rem-calc(15 0);
                }
    
                // 16px x 16px
                .kx-icon--size-small {
                    margin: rem-calc(14 0);
                }
    
                // 18px x 18px
                .kx-icon--size-base {
                    margin: rem-calc(13 0);
                }
    
                // 24px x 24px
                .kx-icon--size-moderate {
                    margin: rem-calc(10 0);
                }
            }
        }
    }
    
    // Skin
    .kx-btn--skin-primary {
        background-color: $color-btn-primary-bg;
        color: $color-btn-primary-txt;
    
        &:focus,
        &.kx-is-focus {
            background-color: $color-btn-primary-bg-focus;
            color: $color-btn-primary-txt-focus;
            box-shadow: inset 0 0 0 rem-calc(2) $color-btn-primary-border-focus;
        }
    
        &:hover,
        &.kx-is-hover {
            background-color: $color-btn-primary-bg-hover;
            color: $color-btn-primary-txt-hover;
            box-shadow: none;
        }
    
        &:active,
        &.kx-is-active {
            background-color: $color-btn-primary-bg-active;
            color: $color-btn-primary-txt-active;
            outline: 0;
        }
    
        &:disabled,
        &.kx-is-disabled {
            background-color: $color-btn-primary-bg-disabled;
            color: $color-btn-primary-txt-disabled;
            opacity: 100;
        }
    }
    
    .kx-btn--skin-secondary {
        background-color: $color-btn-secondary-bg;
        color: $color-btn-secondary-txt;
        box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset;
    
        &:focus,
        &.kx-is-focus {
            background-color: $color-btn-secondary-bg-focus;
            color: $color-btn-secondary-txt-focus;
            box-shadow: inset 0 0 0 rem-calc(2) $color-btn-secondary-border-focus;
        }
    
        &:hover,
        &.kx-is-hover {
            background-color: $color-btn-secondary-bg-hover;
            color: $color-btn-secondary-txt-hover;
            box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset, rem-calc(0 1 4 0) $color-shadow-base;
        }
    
        &:active,
        &.kx-is-active {
            background-color: $color-btn-secondary-bg-active;
            color: $color-btn-secondary-txt-active;
            box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset;
            outline: 0;
        }
    
        &:disabled,
        &.kx-is-disabled {
            background-color: $color-btn-secondary-bg-disabled;
            color: $color-btn-secondary-txt-disabled;
            box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border-disabled inset;
            opacity: 100;
        }
    
        &.kx-is-selected {
            background-color: $color-btn-secondary-bg-selected;
            color: $color-btn-secondary-txt-selected;
            box-shadow: none;
        }
    }
    
    .kx-btn--skin-flat {
        @include type-weight(bold);
        text-transform: uppercase;
        background-color: $color-btn-flat-bg;
        color: $color-btn-flat-txt;
    
        &:focus,
        &.kx-is-focus {
            background-color: $color-btn-flat-bg-focus;
            color: $color-btn-flat-txt-focus;
            box-shadow: inset 0 0 0 rem-calc(2) $color-btn-flat-border-focus;
        }
    
        &:hover,
        &.kx-is-hover {
            background-color: $color-btn-flat-bg-hover;
            color: $color-btn-flat-txt-hover;
            box-shadow: none;
        }
    
        &:active,
        &.kx-is-active {
            background-color: $color-btn-flat-bg-active;
            color: $color-btn-flat-txt-active;
            outline: 0;
        }
    
        &:disabled,
        &.kx-is-disabled {
            background-color: $color-btn-flat-bg-disabled;
            color: $color-btn-flat-txt-disabled;
            opacity: 100;
        }
    }
    
    .kx-btn--skin-primary,
    .kx-btn--skin-secondary {
        @include type-weight(bold);
        border-radius: rem-calc($border-radius-btn);
    }
    
    .kx-btn--skin-link {
        background-color: $color-btn-link-bg;
        color: $color-btn-link-txt;
        padding-left: 0;
        padding-right: 0;
    
        .kx-btn__txt {
            text-decoration: underline;
            color: inherit;
        }
    
        &:focus,
        &.kx-is-focus {
            background-color: $color-btn-link-bg-focus;
            color: $color-btn-link-txt-focus;
            box-shadow: none;
    
            .kx-btn__txt {
                @include px(tiny);
                margin-left: rem-calc(-4);
                margin-right: rem-calc(-4);
                outline: none;
                color: $color-link-txt-focus;
                background-color: $color-link-bg-focus;
            }
        }
    
        .kx-btn__txt {
            &:hover {
                text-decoration: none;
                cursor: pointer;
                border-radius: 0;
                color: $color-link-txt-hover;
                background: none;
            }
        }
    
        &:active,
        &.kx-is-active {
            background-color: $color-btn-link-bg-active;
            color: $color-btn-link-txt-active;
        }
    
        &:disabled,
        &.kx-is-disabled {
            background-color: $color-btn-link-bg;
            color: rgba($color-btn-link-txt, 0.3);
    
            .kx-btn__txt {
                &:hover,
                &.kx-is-hover {
                    @include text-underline(currentColor, currentColor);
                    cursor: not-allowed;
                }
            }
        }
    }
    
    .kx-btn--icon {
        // Reset padding on button to compensate for margins on actual icon
        padding: 0;
    }
    
    input[type=button],
    input[type=reset],
    input[type=submit] {
        &.kx-btn--skin-link {
            text-decoration: underline;
        }
    
        &:hover,
        &.kx-is-hover {
            text-decoration: none;
        }
    }
    
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src\components\01-button\_button.scss
  • Size: 10.9 KB

Buttons

Please see the guidelines for Buttons for more info.