Swegon Component Library

Button: With Icon 

<a class="button   button--icon" href="#">
    <span class="button__label">Label here</span>
    <svg class="icon button__icon" focusable="false">
        <use xlink:href="#icon-download"></use>
    </svg>
</a>
 
<{{getelement tag "a"}} class="button {{ getmodifiers modifiers "button" }} {{additionalClasses}} {{#if icon}}button--icon{{/if}}" {{#if href}}href="{{href}}"{{/if}} {{{getattributes attributes}}}>
    {{#if label}}
        <span class="button__label">{{ label }}</span>
    {{/if}}
    {{#if icon}}
        {{> @icon id=icon additionalClasses="button__icon"}}
    {{/if}}
</{{getelement tag "a"}}>
 
{
  "label": "Label here",
  "href": "#",
  "icon": "download"
}
  • Content: 
    .button {
    position: relative;
    display: inline-block;
    min-height: size(5);
    padding-left: size(5);
    padding-right: size(5);
    padding-top: calc(#{size(1)} + 1px); // visual trick to align text vertically, bypassing font issue
    padding-bottom: calc(#{size(1)} - 1px); // visual trick to align text vertically, bypassing font issue
    background-color: $color-green-dark;
    background-color: var(--surface-button, var(--theme-accent, #{$color-green-dark}));
    color: $color-white;
    color: var(--surface-button-text, #{$color-white});
    box-shadow: inset 0 0 0 1px var(--surface-button-border, transparent);
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    vertical-align: baseline;
    text-decoration: none;
    border-radius: 0;
    margin-bottom: size(2);
    cursor: pointer;

    &:hover {
        background-color: darken($color-green-dark, 2%);
        background-color: var(--surface-button-hover, var(--theme-accent-hover, #{darken($color-green-dark, 2%)}));
        text-decoration: none;

        .button__icon {
            fill: var(--surface-button-hover-text, #{$color-white});
        }
    }

    &:focus-visible {
        outline-offset: 3px;
    }

    @include color-theme {
        background-color: var(--surface-button, var(--theme-accent, #{$arg-theme-color}));

        &:hover {
            background-color: var(--surface-button-hover, var(--theme-accent-hover, #{darken($arg-theme-color, 2%)}));
        }
    }

    @include dark-theme {
        box-shadow: inset 0 0 0 1px var(--surface-button-border, #{$color-white});

        &:hover {
            background-color: var(--surface-button-hover, #{$color-white});
            color: var(--surface-button-hover-text, var(--theme-accent, #{$arg-theme-color}));
        }
    }
}

.button--icon {
    text-align: left;
    padding-left: size(3);
    padding-right: size(9);
}

.button--wide {
    @include breakpoint-classes {
        width: 100%;
    }
}

.button--white {
    background-color: $color-white;
    color: $color-green-dark;

    &:hover {
        background-color: $color-green;
        color: $color-white;
    }
}

.button--ghost-white {
    background-color: transparent;
    color: $color-white;
    box-shadow: inset 0 0 0 1px $color-white;

    &:hover,
    &:focus-visible {
        color: $color-green-dark;
        background-color: $color-white;
        box-shadow: none;
    }

    @include color-theme {
        background-color: transparent;
        color: $color-white;
        box-shadow: inset 0 0 0 1px $color-white;

        &:hover,
        &:focus-visible {
            background-color: $color-white;
            color: $arg-theme-color;
            box-shadow: none;
        }
    }
}

.button.button--ghost {
    background-color: transparent;
    color: $color-green-dark;
    color: var(--surface-ghost-text, var(--theme-accent, #{$color-green-dark}));
    box-shadow: inset 0 0 0 1px $color-green-dark;
    box-shadow: inset 0 0 0 1px var(--surface-ghost-text, var(--theme-accent, #{$color-green-dark}));

    &:hover,
    &:focus-visible {
        color: $color-white;
        color: var(--surface-ghost-hover-text, #{$color-white});
        background-color: $color-green-dark;
        background-color: var(--surface-ghost-hover, var(--theme-accent, #{$color-green-dark}));
        box-shadow: none;

        .button__icon {
            fill: var(--surface-ghost-hover-text, #{$color-white});
        }
    }

    .button__icon {
        fill: var(--surface-ghost-text, var(--theme-accent, #{$color-green-dark}));
    }

    @include dark-theme {
        color: $color-white;
        color: var(--surface-ghost-text, #{$color-white});
        box-shadow: inset 0 0 0 1px $color-white;
        box-shadow: inset 0 0 0 1px var(--surface-ghost-text, #{$color-white});

        &:hover,
        &:focus-visible {
            background-color: $color-white;
            background-color: var(--surface-ghost-hover, #{$color-white});
            color: $color-green-dark;
            color: var(--surface-ghost-hover-text, var(--theme-accent, #{$color-green-dark}));
        }
    }
}

.button--arrow {
    background-color: transparent;
    color: $color-black;
    padding-right: 44px;
    padding-left: 4px;
    width: fit-content;

    .button__icon {
        fill: $color-black;
        right: 0px;
        top: 55%;
    }

    &:hover {
        background-color: transparent;
        color: $color-black;
        text-decoration: underline;

        .button__icon {
            fill: $color-black;
        }
    }
}

.button--arrow {
    background-color: transparent;
    color: $color-black;
    padding-right: 44px;
    padding-left: 4px;
    width: fit-content;

    .button__icon {
        fill: $color-black;
        right: 0px;
        top: 55%;
    }

    &:hover {
        background-color: transparent;
        color: $color-black;
        text-decoration: underline;

        .button__icon {
            fill: $color-black;
        }
    }
}

.button--rounded {
    border-radius: size(5);
    padding-left: size(2);
    padding-right: size(2);
    white-space: nowrap;

    &.button--ghost {
        box-shadow: inset 0 0 0 2px $color-green-dark;

        &:hover {
            box-shadow: none;
        }

        @include color-theme {
            box-shadow: inset 0 0 0 2px $arg-theme-color;

            &:hover {
                box-shadow: inset 0 0 0 2px $arg-theme-color;
            }
        }

        @include dark-theme {
            box-shadow: inset 0 0 0 2px $color-white;

            &:hover {
                box-shadow: inset 0 0 0 2px $color-white;
            }
        }

        &__black {
            box-shadow: inset 0 0 0 2px $color-black;

            &:hover {
                box-shadow: none;
            }

            @include color-theme {
                box-shadow: inset 0 0 0 2px $color-black;

                &:hover {
                    box-shadow: inset 0 0 0 2px $color-black;
                }
            }

            @include dark-theme {
                box-shadow: inset 0 0 0 2px $color-white;

                &:hover {
                    box-shadow: inset 0 0 0 2px $color-white;
                }
            }
        }
    }
}

.button__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: size(1.5);
    width: size(3);
    height: size(3);
    fill: $color-white;
}

.button__label {
    font-size: size(2);
    line-height: size(3);
    height: 100%;
    vertical-align: baseline;

    .button--rounded & {
        font-size: size(1.5);
        line-height: size(2.5);
    }
}

.arrow-button-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: size(5);

    &__white {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        column-gap: size(5);
        flex-direction: row;

        .button--arrow {
            color: $color-white;
            color: var(--surface-link, #{$color-white});

            .button__icon {
                fill: $color-white;
                fill: var(--surface-link, #{$color-white});
            }
        }
    }


    @include breakpoint($m) {
        flex-direction: row;
    }

    .button {
        background-color: transparent;

        &:hover {
            background-color: transparent;
            text-decoration: underline;
        }
    }

    a {
        @include dark-theme {
            box-shadow: none;
            color: $color-white;
            color: var(--surface-link, #{$color-white});

            svg {
                fill: $color-white;
                fill: var(--surface-link, #{$color-white});
            }

            &:hover {
                color: $color-white;
            color: var(--surface-link, #{$color-white});

                svg {
                    fill: $color-white;
                fill: var(--surface-link, #{$color-white});
                }
            }
        }
    }
}

.arrow-color-black {
    @include breakpoint-classes {
        .button--arrow {
            color: $color-black;

            .button__icon {
                fill: $color-black;
            }
        }
    }
}

.arrow-color-white {
    @include breakpoint-classes {
        .button--arrow {
            color: $color-white;
            color: var(--surface-link, #{$color-white});

            .button__icon {
                fill: $color-white;
                fill: var(--surface-link, #{$color-white});
            }
        }
    }
}

.button-link:not(.active) {
    color: $color-green-dark;
    cursor: pointer;
}

.button-link {
    font-weight: 700;

    &:focus-visible {
        outline-offset: 3px;
    }

}

.search-results-documents {
    & .button-link {
        width: max-content;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/button/button.scss
  • Size: 8.8 KB

No notes defined.