Uihub

Appearance

Disabled Buttons ​

Solid ​






html
<div>
    <button class="sharp" disabled>
        <span class="u-icon">plus</span>
        <span>Create config setting</span>
    </button>
    <br>
    <button class="success sharp" disabled>
        <span class="u-icon">plus</span>
        Create config setting
    </button>
    <br>
    <button class="error sharp" disabled>
        <span class="u-icon">plus</span>
        Create config setting
    </button>
    <br>
    <button class="warning sharp" disabled>
        <span class="u-icon">plus</span>
        Create config setting
    </button>
    <br>
    <button class="grey sharp" disabled>
        <span class="u-icon">plus</span>
        Create config setting
    </button>
    <br>
    <button class="info sharp" disabled>
        <span class="u-icon">plus</span>
        Create config setting
    </button>
</div>

Outlined ​






html
<div>
    <button class="outlined sharp" disabled>
        Create config setting
    </button>
    <br>
    <button class="outlined success sharp" disabled>
        Create config setting
    </button>
    <br>
    <button class="outlined error sharp" disabled>
        Create config setting
    </button>
    <br>
    <button class="outlined warning sharp" disabled>
        Create config setting
    </button>
    <br>
    <button class="outlined grey sharp" disabled>
        Create config setting
    </button>
    <br>
    <button class="outlined info sharp" disabled>
        Create config setting
    </button>
</div>

Flat ​






html
<div>
    <button class="flat" disabled>
        Create config setting
    </button>
    <br>
    <button class="flat success" disabled>
        Create config setting
    </button>
    <br>
    <button class="flat error" disabled>
        Create config setting
    </button>
    <br>
    <button class="flat warning" disabled>
        Create config setting
    </button>
    <br>
    <button class="flat grey" disabled>
        Create config setting
    </button>
    <br>
    <button class="flat info" disabled>
        Create config setting
    </button>
</div>

Customisation ​

css
button,
input[type="submit"],
input[type="button"] {
    --loading-indicator-size: 1.25rem;
}