Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Badge Component

CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
badgeBasisLabel sebaris kecil
badge-outlineGayaIsi transparan dengan batas berwarna
badge-softGayaLatar belakang berwarna teredam
badge-ghostGayaLatar belakang halus tanpa batas
badge-dashedGayaGaya perbatasan putus-putus
badge-pillGayaBentuk pil bulat penuh
badge-roundedGayaPembulatan sedang
badge-circleGayaLingkaran dengan lebar yang sama untuk satu karakter atau angka
badge-squareGayaPersegi tanpa pembulatan
badge-xsUkuranSangat kecil
badge-smUkuranKecil
badge-mdUkuranSedang (standar)
badge-lgUkuranBesar
badge-xlUkuranEkstra besar
badge-2xlUkuran2× ekstra besar
badge-primaryWarnaWarna tema utama
badge-secondaryWarnaWarna tema sekunder
badge-accentWarnaWarna tema aksen
badge-neutralWarnaWarna tema netral
badge-infoWarnaInfo warna semantik
badge-successWarnaWarna semantik sukses
badge-warningWarnaWarna semantik peringatan
badge-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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

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

Ukuran Lencana

Xsmall Small Medium Large Xlarge 2XLarge
html 
1
2
3
4
5
6
<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>

Warna Lencana

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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>

Gaya Lencana

Lencana Lembut

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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>

Lencana Garis Besar

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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>

Lencana Putus-putus

Default Primary Secondary Accent Info Success Warning Error Neutral
html 
1
2
3
4
5
6
7
8
9
<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>

Lencana Hantu

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

Bentuk Lencana

Lencana Bulat

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

Lencana Pil

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

Lencana Persegi

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

Lencana Lingkaran

html 
1
2
3
<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>

Indikator Lencana

Lencana kosong sempurna untuk indikator status atau titik notifikasi.

html 
1
2
3
4
5
<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>

Komposisi Lencana

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

Lencana dengan Ikon

Info Success Warning Error
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

Tombol Lencana Di Dalam

html 
1
2
3
4
5
6
7
8
<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>