Lencana

Dokumentasi dan contoh untuk lencana, jumlah kecil dan komponen pelabelan kami.

Contoh

Skala lencana agar sesuai dengan ukuran elemen induk langsung dengan menggunakan ukuran dan emunit font relatif.

Contoh judulBaru

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

Variasi kontekstual

Tambahkan salah satu kelas pengubah yang disebutkan di bawah ini untuk mengubah tampilan lencana.

Utama Sekunder Kesuksesan Bahaya Peringatan Info Lampu Gelap

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

Lencana pil

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.

Utama Sekunder Kesuksesan Bahaya Peringatan Info Lampu Gelap

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

Tautan

Menggunakan .badge-*kelas kontekstual pada <a>elemen dengan cepat memberikan lencana yang dapat ditindaklanjuti dengan status melayang dan fokus.

Utama Sekunder Kesuksesan Bahaya Peringatan Info Lampu Gelap

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