Buttons

Default

<button>
    Default
</button>

<button>
    <span>Default</span>
</button>

Icons

<button>
    <span class="icon ri-add-line"></span>
    <span>Add</span>
</button>

<button>
    <span>Remove</span>
    <span class="icon ri-delete-bin-line"></span>
</button>

Small

<button class="small">
    <span>Small</span>
</button>

<button class="small">
    <span class="icon ri-settings-line"></span>
    <span>Small Icon</span>
</button>

Disabled

<button disabled>
    <span class="icon ri-settings-line"></span>
    <span>Disabled</span>
</button>

Loading

<button>
    <span class="icon loading ri-loader-4-fill"></span>
    <span>Loading</span>
</button>

Colors

<button>
    <span class="icon ri-settings-line"></span>
    <span>Default</span>
</button>

<button class="transparent">
    <span class="icon ri-settings-line"></span>
    <span>Transparent</span>
</button>

<button class="primary">
    <span class="icon ri-settings-line"></span>
    <span>Primary</span>
</button>

<button class="outline">
    <span class="icon ri-settings-line"></span>
    <span>Outline</span>
</button>