Dasar

Membuat kamu membutuhkan tag <button> atau tag <a> dengan class .btn dan diikuti class untuk style Button-nya, ada .btn--gray, .btn--blue, .btn--green, .btn--orange, .btn--red, dan .btn--link.

CopyHTML
<button class="btn btn--gray">Gray Normal</button>
<a href="#" class="btn btn--blue">Blue Normal</a>
<a href="#" class="btn btn--green">Green Normal</a>
<a href="#" class="btn btn--orange">Orange Normal</a>
<a href="#" class="btn btn--red">Red Normal</a>
<a href="#" class="btn btn--link">Link</a>

Outline

Membuat outline button kamu perlu menambahkan kata outline pada akhiran class untuk style Button-nya. Contoh yang sebelumnya .btn--blue menjadi .btn--blue-outline.

CopyHTML
<button class="btn btn--gray-outline">Gray Outline</button>
<a href="#" class="btn btn--blue-outline">Blue Outline</a>
<a href="#" class="btn btn--green-outline">Green Outline</a>
<a href="#" class="btn btn--orange-outline">Orange Outline</a>
<a href="#" class="btn btn--red-outline">Red Outline</a>

Disabled

Jika kamu membuat button menggunakan tag <button>, maka kamu perlu menambahkan attribute disabled="" pada tag <button>. Jika kamu membuat button menggunakan tag <a>, maka kamu perlu menambahkan class .btn--disabled setelah class untuk style Button-nya.

CopyHTML
<a class="btn btn--blue btn--disabled" href="#">Blue Disabled</a>
<button class="btn btn--blue" disabled="">Blue Disabled</button>

Loading

Membuat Loading sama dengan dokumentasi Loading, hanya saja kamu perlu membungkus Loading dan Button kedalam tag <div> dengan class .btn-loading.

Untuk menyembunyikan Loading, kamu perlu menambahkan class utilities Bootstrap untuk display none .d-none setelah class .loading-circle--blue, untuk menampilkan Loading kamu bisa menghapus class .d-none. Gunakan Javascript & DOM untuk menghapus atau menambahkan class. Penjelasan detail mengenai Loading dan contoh Loading yang lain, kamu bisa lihat di dokumentasi Loading.

CopyHTML
<div class="btn-loading">
    <div class="loading-circle loading-circle--blue">
        <div class="loading-circle__fill"></div>
    </div>
    <a href="#" class="btn btn--blue">Blue Loading</a>
</div>