Tombol

Gunakan gaya tombol kustom Bootstrap untuk tindakan dalam formulir, dialog, dan lainnya dengan dukungan untuk berbagai ukuran, status, dan lainnya.

Contoh

Bootstrap menyertakan beberapa gaya tombol yang telah ditentukan, masing-masing melayani tujuan semantiknya sendiri, dengan beberapa tambahan untuk kontrol lebih.

<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>

Nonaktifkan pembungkusan teks

Jika Anda tidak ingin teks tombol terbungkus, Anda dapat menambahkan .text-nowrapkelas ke tombol. Di Sass, Anda dapat mengatur $btn-white-space: nowrapuntuk menonaktifkan pembungkusan teks untuk setiap tombol.

Tag tombol

Kelas .btndirancang untuk digunakan dengan <button>elemen. Namun, Anda juga dapat menggunakan kelas <a>atau <input>elemen ini (meskipun beberapa browser mungkin menerapkan rendering yang sedikit berbeda).

Saat menggunakan kelas tombol pada <a>elemen yang digunakan untuk memicu fungsionalitas dalam halaman (seperti menciutkan konten), daripada menautkan ke halaman atau bagian baru dalam halaman saat ini, tautan ini harus diberi a role="button"untuk menyampaikan tujuannya dengan tepat ke teknologi pendukung seperti pembaca layar.

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

Tombol garis besar

Membutuhkan tombol, tetapi bukan warna latar belakang yang besar dan kuat yang mereka bawa? Ganti kelas pengubah default dengan .btn-outline-*yang menghapus semua gambar dan warna latar belakang pada tombol apa pun.

<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>

Ukuran

Ingin tombol yang lebih besar atau lebih kecil? Tambahkan .btn-lgatau .btn-smuntuk ukuran tambahan.

<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>

Buat tombol level blok—tombol yang menjangkau lebar penuh induknya—dengan menambahkan .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Status aktif

Tombol akan tampak ditekan saat aktif dengan latar belakang yang lebih gelap, batas yang lebih gelap, dan, saat bayangan diaktifkan, bayangan sisipan. Tidak perlu menambahkan kelas ke <button>s karena mereka menggunakan pseudo-class . Namun, Anda masih dapat memaksakan tampilan aktif yang sama dengan .active(dan menyertakan aria-pressed=“true”atribut) jika Anda perlu mereplikasi status secara terprogram.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Status dinonaktifkan

Buat tombol terlihat tidak aktif dengan menambahkan disabledatribut boolean ke <button>elemen apa pun.

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

Tombol yang dinonaktifkan menggunakan <a>elemen berperilaku sedikit berbeda:

• <a>s tidak mendukung disabledatribut tersebut, jadi Anda harus menambahkan .disabledkelas agar tampak dinonaktifkan secara visual.
• Beberapa gaya ramah masa depan disertakan untuk menonaktifkan semua pointer-eventstombol jangkar. Di browser yang mendukung properti itu, Anda tidak akan melihat kursor yang dinonaktifkan sama sekali.
• Penggunaan tombol yang dinonaktifkan <a>harus menyertakan aria-disabled="true"atribut untuk menunjukkan status elemen ke teknologi bantu.
• Tombol yang dinonaktifkan menggunakan <a> tidak boleh menyertakan hrefatribut.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Peringatan fungsionalitas tautan

Untuk menutupi kasus di mana Anda harus menyimpan hrefatribut pada tautan yang dinonaktifkan, .disabledkelas menggunakan pointer-events: noneuntuk mencoba menonaktifkan fungsionalitas tautan <a>s. Perhatikan bahwa properti CSS ini belum distandarisasi untuk HTML, tetapi semua browser modern mendukungnya. Selain itu, bahkan di browser yang mendukung pointer-events: none, navigasi keyboard tetap tidak terpengaruh, artinya pengguna keyboard yang dapat melihat dan pengguna teknologi bantu masih dapat mengaktifkan tautan ini. Jadi agar aman, selain aria-disabled="true", sertakan juga tabindex="-1"atribut pada tautan ini untuk mencegahnya menerima fokus keyboard, dan gunakan JavaScript khusus untuk menonaktifkan fungsinya sama sekali.

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

Plugin tombol

Lakukan lebih banyak dengan tombol. Kontrol status tombol atau buat grup tombol untuk lebih banyak komponen seperti bilah alat.

Alihkan status

Tambahkan data-toggle="button"untuk mengaktifkan status tombol active. Jika Anda melakukan pra-beralih tombol, Anda harus menambahkan .activekelas secara manual dan aria-pressed="true" ke file <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Kotak centang dan tombol radio

Gaya bootstrap .buttondapat diterapkan ke elemen lain, seperti <label>s, untuk menyediakan kotak centang atau tombol tombol gaya radio toggling. Tambahkan data-toggle="buttons"ke a .btn-groupyang berisi tombol yang dimodifikasi tersebut untuk mengaktifkan perilaku beralihnya melalui JavaScript dan tambahkan .btn-group-toggleke gaya <input>s di dalam tombol Anda. Perhatikan bahwa Anda dapat membuat tombol atau grup dengan input tunggal.

Status yang dicentang untuk tombol-tombol ini hanya diperbarui melalui clickacara pada tombol. Jika Anda menggunakan metode lain untuk memperbarui input—misalnya, dengan <input type="reset">atau dengan menerapkan checkedproperti input secara manual—Anda harus mengaktifkannya .activesecara <label>manual.

Perhatikan bahwa tombol yang telah dicentang sebelumnya mengharuskan Anda untuk menambahkan .activekelas secara manual ke file <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Metode