Sharp Button

Solid

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

Outlined

<div>
    <button class="outlined sharp">
        Create config setting
    </button>
    <br>
    <button class="outlined success sharp">
        Create config setting
    </button>
    <br>
    <button class="outlined error sharp">
        Create config setting
    </button>
    <br>
    <button class="outlined warning sharp">
        Create config setting
    </button>
    <br>
    <button class="outlined grey sharp">
        Create config setting
    </button>
    <br>
    <button class="outlined info sharp">
        Create config setting
    </button>
</div>
<div>
    <button class="outlined sharp" aria-busy="true">
        Create config setting
    </button>
    <br>
    <button class="outlined success sharp" aria-busy="true">
        Create config setting
    </button>
    <br>
    <button class="outlined error sharp" aria-busy="true">
        Create config setting
    </button>
    <br>
    <button class="outlined warning sharp" aria-busy="true">
        Create config setting
    </button>
    <br>
    <button class="outlined grey sharp" aria-busy="true">
        Create config setting
    </button>
    <br>
    <button class="outlined info sharp" aria-busy="true">
        Create config setting
    </button>
</div>

Flat

<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

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