Komponen Lencana

Terakhir diperbarui: Juli 13, 2026

Lencana Tailwind CSS khusus CSS dengan varian primer, sekunder, aksen, info, sukses, peringatan, dan kesalahan. Gaya lembut, garis besar, dan hantu, ukuran xs-lg. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen lencana adalah label kecil dan ringkas yang digunakan untuk menyorot, mengkategorikan, atau menampilkan informasi status. Dibuat dengan HTML semantik dan Tailwind CSS, lencana mendukung berbagai ukuran, warna, dan gaya untuk integrasi fleksibel ke dalam tabel, kartu, profil pengguna, dan sistem notifikasi. Ringan dan mudah diakses, lencana meningkatkan hierarki informasi tanpa menambah kekacauan visual.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas	Jenis	Keterangan
badge	Basis	Label sebaris kecil
badge-outline	Gaya	Isi transparan dengan batas berwarna
badge-soft	Gaya	Latar belakang berwarna teredam
badge-ghost	Gaya	Latar belakang halus tanpa batas
badge-dashed	Gaya	Gaya perbatasan putus-putus
badge-pill	Gaya	Bentuk pil bulat penuh
badge-rounded	Gaya	Pembulatan sedang
badge-circle	Gaya	Lingkaran dengan lebar yang sama untuk satu karakter atau angka
badge-square	Gaya	Persegi tanpa pembulatan
badge-xs	Ukuran	Sangat kecil
badge-sm	Ukuran	Kecil
badge-md	Ukuran	Sedang (standar)
badge-lg	Ukuran	Besar
badge-xl	Ukuran	Ekstra besar
badge-2xl	Ukuran	2× ekstra besar
badge-primary	Warna	Warna tema utama
badge-secondary	Warna	Warna tema sekunder
badge-accent	Warna	Warna tema aksen
badge-neutral	Warna	Warna tema netral
badge-info	Warna	Info warna semantik
badge-success	Warna	Warna semantik sukses
badge-warning	Warna	Warna semantik peringatan
badge-error	Warna	Kesalahan warna semantik

Penggunaan Dasar

<span class="badge">Badge</span>

<span className="badge">Badge</span>

View Code

Ukuran Lencana

<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>

View Code

Warna Lencana

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>

View Code

Gaya Lencana

Lencana Lembut

<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>

View Code

Lencana Garis Besar

<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>

View Code

Lencana Putus-putus

<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>

View Code

Lencana Hantu

<span class="badge badge-ghost">Ghost</span>

View Code

Bentuk Lencana

Lencana Bulat

<span class="badge badge-error badge-rounded">10</span>

View Code

Lencana Pil

<span class="badge badge-warning badge-pill">Pill badge</span>

View Code

Lencana Persegi

<span class="badge badge-neutral badge-square">99+</span>

View Code

Lencana Lingkaran

<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>

View Code

Indikator Lencana

Lencana kosong sempurna untuk indikator status atau titik notifikasi.

<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>

View Code

Komposisi Lencana

Integrasikan lencana dengan ikon atau letakkan di dalam komponen lain seperti tombol.

Lencana dengan Ikon

<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>

View Code

Tombol Lencana Di Dalam

<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>

View Code

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Lencana yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP

Komponen Lencana

Penggunaan Dasar

Ukuran Lencana

Warna Lencana

Gaya Lencana

Lencana Lembut

Lencana Garis Besar

Lencana Putus-putus

Lencana Hantu

Bentuk Lencana

Lencana Bulat

Lencana Pil

Lencana Persegi

Lencana Lingkaran

Indikator Lencana

Komposisi Lencana

Lencana dengan Ikon

Tombol Lencana Di Dalam

Terkait