Uihub

Appearance

Buttons Sizes ​

Small ​






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

Medium ​






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

Large ​






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

Customisation ​

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