Button

Nur die Varianten primary und link sind definiert.

.btn-primary {
    @include button-variant(
        $primary,
        $primary,
        #fff,
        $secondary,
        $secondary,
        #fff
    );
}

.btn {

    &:focus-visible {
        box-shadow: 0 0 0 #{$btn-focus-width} rgba($accent, .5);
    }
}

.btn-icon {
    align-items: center;
    display: inline-flex;
    gap: .3em;

    .ti {
        font-size: 1.3em;
    }

    &.btn-link {
        text-decoration: none;

        span {
            text-decoration: underline;
        }
    }
}

Varianten

Standard

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-link">Link</button>

Icon

<button type="button" class="btn btn-primary btn-icon">
    <i class="ti ti-trash"></i>
    <span>Buttontext</span>
</button>
<button type="button" class="btn btn-link btn-icon">
    <i class="ti ti-trash"></i>
    <span>Buttontext</span>
</button>

Varianten