Button

<button class="ga-button">Base</button>

<button class="ga-button">Tag</button>
<div class="ga-button">Class name</div>

<button class="ga-button { brand }">Brand</button>

<button class="ga-button { status }">Status</button>

<button class="ga-button { colors }">Color</button>

<button class="ga-button disabled">Disabled(class)</button>
<button class="ga-button" disabled>Disabled(attr)</button>

<button class="ga-button border">Border</button>

<button class="ga-button fluid">Fluid</button>

<button class="ga-button compact">Compact</button>

<button class="ga-button outline">Outline</button>

<button class="ga-button icon">
    <i class="xi-icon"></i>
</button>

<button class="ga-button round">Round</button>

<button class="ga-button">
    <i class="icon left xi-icon"></i>
    Left
</button>
<button class="ga-button">
    Right
    <i class="icon right xi-icon"></i>
</button>

<button class="ga-button badge">
    <sapn class="in-badge">B</span>
    Contents
</button>
<!-- Can`t use attribute fluid with badge type -->

<button class="ga-button text">
    Contents
</button>

<div class="ga-buttons">
    <div class="ga-button selected">BTN 1</div>
    <div class="ga-button">BTN 2</div>
    <div class="ga-button">BTN 3</div>
    <div class="ga-button">BTN 4</div>
    ...
 </div>