---
title: "Badge"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Badge with solid, soft, outline, and ghost styles. Multiple sizes and semantic color variants for labels, statuses, and notification counts."
url: https://frutjam.com/id/components/badge
---

# Badge Component

 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

## Ukuran Lencana

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

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

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

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

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

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

## Bentuk Lencana

### Lencana Bulat

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

### Lencana Pil

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

### Lencana Persegi

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

### Lencana Lingkaran

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

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