JSFiddle - React, Tailwind, and code Playground

HTML

<button disabled class="primary info">
    Info Button
</button>
<button class="primary info disabled">
    Info Button
</button>
<button disabled class="primary info">
    Info Button
</button>

SCSS

html{
    font-size: 10px;
    
    padding: 1rem;
}

$color-normal-background: rgba( 255, 255, 255, 1 );
$color-bright-type: rgba( 240, 240, 240, 1 );
$color-subtle: rgba( 231, 231, 231, 1 );
$color-dark: rgba( 32, 42, 54, 1 );
$color-status-info: rgba( 104, 192, 221, 1 );

$size-button-radius: 0.3rem;
$size-button-padding-x: 1.6rem;
$size-button-padding-y-standard: 1.3rem;
$size-text-extra: 1.6rem;

@mixin button( $color ){
    background-color: $color;
    border-color: $color;

    &:disabled,
    &.disabled{
        border-color: transparentize( $color, 0.50 );
    }

    &.primary{
        text-transform: uppercase;

        &:not(.disabled),
        &:not(:disabled){
            color: $color-bright-type;
        }

        &:hover,
        &.hover{
            background-color: transparentize( $color, 0.25 );
            border-color: transparentize( $color, 0.25 );
        }

        &:active,
        &.active{
            background-color: transparentize( $color, 0.10 );
            border-color: transparentize( $color, 0.10 );
        }

        &:disabled,
        &.disabled{
            background-color: transparentize( $color, 0.75 );
            border-color: transparentize( $color, 0.75 );
        }
    }
}

button{
    color: $color-dark;

    font-size: $size-text-extra;
    line-height: $size-text-extra;

    border:{
        width: 1px;
        style: solid;
        radius: $size-button-radius;
    }

    padding: $size-button-padding-y-standard $size-button-padding-x;

    &:disabled,
    &.disabled{
        color: darken( $color-subtle, 25% );

        cursor: default;
    }

    @include button( $color-dark );
    
    &.info{
        @include button( $color-status-info );
    }

    &:not(.primary){
        background-color: $color-normal-background;
    }
}