Lencana
Dokumentasi dan contoh untuk lencana, jumlah kecil dan komponen pelabelan kami.
Skala lencana agar sesuai dengan ukuran elemen induk langsung dengan menggunakan ukuran dan emunit font relatif.
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>Lencana dapat digunakan sebagai bagian dari tautan atau tombol untuk memberikan penghitung.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Perhatikan bahwa bergantung pada cara penggunaannya, lencana mungkin membingungkan bagi pengguna pembaca layar dan teknologi bantu serupa. Sementara gaya lencana memberikan isyarat visual untuk tujuan mereka, pengguna ini hanya akan disajikan dengan konten lencana. Bergantung pada situasi tertentu, lencana ini mungkin tampak seperti kata atau angka tambahan acak di akhir kalimat, tautan, atau tombol.
Kecuali konteksnya jelas (seperti contoh “Pemberitahuan”, yang dipahami bahwa “4” adalah jumlah notifikasi), pertimbangkan untuk menyertakan konteks tambahan dengan bagian teks tambahan yang tersembunyi secara visual.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Tambahkan salah satu kelas pengubah yang disebutkan di bawah ini untuk mengubah tampilan lencana.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas.
Gunakan .badge-pillkelas pengubah untuk membuat lencana lebih bulat (dengan border-radiushorizontal yang lebih besar dan tambahan padding). Berguna jika Anda melewatkan lencana dari v3.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Menggunakan .badge-*kelas kontekstual pada <a>elemen dengan cepat memberikan lencana yang dapat ditindaklanjuti dengan status melayang dan fokus.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>