Uihub

Appearance

Default Buttons ​

Usage ​

See design usage guidelines

Buttons are UI elements for initializing actions upon user interaction.

Just a simple button tag will give your the primary button type. Other types includes flat and outlined.

Available variants are primary, success, error info and warning

Add the attribute aria-busy="true" to get a loading indicator

Solid ​











html
<div class="layout flex-start gap-3">
    <div>
        <button>
            <span class="u-icon">plus</span>
            <span>Create config setting</span>
        </button>
        <br>
        <button class="success">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button class="error">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button class="warning">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button class="grey">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button class="info">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
    </div>
    <div>
        <button aria-busy="true">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button aria-busy="true" class="success">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button aria-busy="true" class="error">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button aria-busy="true" class="warning">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button aria-busy="true" class="grey">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
        <br>
        <button aria-busy="true" class="info">
            <span class="u-icon">plus</span>
            Create config setting
        </button>
    </div>                           
</div>

Outlined ​











html
<div class="layout flex-start gap-3">
    <div>
        <button class="outlined">
            Create config setting
        </button>
        <br>
        <button class="outlined success">
            Create config setting
        </button>
        <br>
        <button class="outlined error">
            Create config setting
        </button>
        <br>
        <button class="outlined warning">
            Create config setting
        </button>
        <br>
        <button class="outlined grey">
            Create config setting
        </button>
        <br>
        <button class="outlined info">
            Create config setting
        </button>
    </div>
    <div>
        <button class="outlined" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="outlined success" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="outlined error" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="outlined warning" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="outlined grey" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="outlined info" aria-busy="true">
            Create config setting
        </button>
    </div>           
</div>



Flat ​











html
<div class="layout flex-start gap-3">
    <div>
        <button class="flat">
            Create config setting
        </button>
        <br>
        <button class="flat success">
            Create config setting
        </button>
        <br>
        <button class="flat error">
            Create config setting
        </button>
        <br>
        <button class="flat warning">
            Create config setting
        </button>
        <br>
        <button class="flat grey">
            Create config setting
        </button>
        <br>
        <button class="flat info">
            Create config setting
        </button>
    </div>
    <div>
        <button class="flat" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="flat success" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="flat error" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="flat warning" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="flat grey" aria-busy="true">
            Create config setting
        </button>
        <br>
        <button class="flat info" aria-busy="true">
            Create config setting
        </button>
    </div>
</div>

Customisation ​

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

Usage Guidelines ​