1. Tombol Dasar (Basic Buttons)

Bootstrap menyediakan beberapa tombol dengan warna berbeda yang menunjukkan fungsi atau status tertentu.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Penjelasan:

• btn-primary → Warna biru (sering digunakan untuk aksi utama).

• btn-secondary → Warna abu-abu.

• btn-success → Warna hijau (untuk sukses atau konfirmasi).

• btn-danger → Warna merah (untuk peringatan atau hapus).

• btn-warning → Warna kuning (peringatan).

• btn-info → Warna biru muda (informasi tambahan).

• btn-light dan btn-dark → Warna terang dan gelap.

• btn-link → Tombol berbentuk link tanpa latar belakang.

berikut hasilnya:

2. Tombol Outline (Tanpa Latar Belakang)

Jika Anda ingin tombol tanpa latar belakang penuh, gunakan btn-outline-*.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Penjelasan:

• Warna tombol hanya berupa garis tepi, tanpa latar belakang warna.

• Warna latar belakang akan muncul saat tombol di-hover.

berikut hasilnya:

3. Ukuran Tombol (Large & Small Buttons)

Bootstrap menyediakan ukuran tombol besar dan kecil dengan .btn-lg dan .btn-sm.

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary btn-lg">Large Button</button>

<button type="button" class="btn btn-primary btn-sm">Small Button</button>
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>

Penjelasan:

• btn-lg → Tombol besar.

• btn-sm → Tombol kecil.

berikut hasilnya:

4. Tombol Non-Aktif (Disabled Buttons)

Jika Anda ingin menonaktifkan tombol, tambahkan disabled ke dalam elemen tombol.

<button type="button" class="btn btn-primary" disabled>Primary (Disabled)</button>
<button type="button" class="btn btn-secondary" disabled>Secondary (Disabled)</button>

Penjelasan:

• Tombol dengan disabled tidak bisa diklik.

berikut hasilnya:

Tombol Link Non-Aktif:

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Link</a>

Untuk elemen <a>, gunakan .disabled agar tampilannya tampak non-aktif.

berikut hasilnya:

5. Tombol yang Menggunakan <a> atau <input>

Bootstrap memungkinkan tombol digunakan pada elemen <a> atau <input>.

<a class="btn btn-primary" href="#" role="button">Link Button</a>
<button class="btn btn-primary" type="submit">Submit Button</button>
<input class="btn btn-primary" type="button" value="Input Button">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Penjelasan:

• Elemen <a> bisa dijadikan tombol jika diberi role="button".

• Elemen <input> bisa memiliki tampilan tombol Bootstrap.

berikut hasilnya:

6. Tombol Lebar Penuh (Block Buttons)

Gunakan .d-grid untuk membuat tombol berukuran penuh.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full Width Button</button>
  <button class="btn btn-secondary" type="button">Full Width Button</button>
</div>

Penjelasan:

• .d-grid membuat tombol memenuhi lebar kontainer.

• gap-2 memberikan jarak antara tombol.

berikut hasilnya:

7. Tombol Toggle (Bisa Dikontrol)

Gunakan data-bs-toggle="button" untuk membuat tombol toggle (aktif/non-aktif).

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active Toggle Button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled Toggle Button</button>

Penjelasan:

• Tombol Toggle bisa berubah status menjadi aktif/non-aktif.

• aria-pressed="true" digunakan untuk membantu pengguna dengan aksesibilitas.

berikut hasilnya:

8. Cara Membuat Tombol dengan JavaScript (Bootstrap Button Plugin)

Jika Anda ingin mengontrol tombol menggunakan JavaScript, gunakan kode berikut:

<button id="myButton" class="btn btn-primary">Click Me</button>

<script>
  var button = document.getElementById('myButton');
  var bsButton = new bootstrap.Button(button);

  // Toggle tombol secara manual
  button.addEventListener('click', function () {
    bsButton.toggle();
  });
</script>

Penjelasan:

• Menggunakan Bootstrap JavaScript API untuk mengontrol tombol.

• Klik tombol untuk mengaktifkan atau menonaktifkan statusnya.

berikut hasilnya: