Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Indicator Component

CSS-only Tailwind CSS indicator for overlaying badges or dots on any element corner. Color variants and positioning. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponen indikator menampilkan status, lencana, atau pemberitahuan yang ditempatkan pada elemen lain. Dibangun dengan pemosisian absolut dan gaya fleksibel, indikator melapisi informasi penting pada kartu, avatar, dan tombol. Sistem indikator Frutjam mendukung berbagai penempatan, ukuran, dan warna—ideal untuk lencana notifikasi, penanda status, dan isyarat 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
indicatorBasisPembungkus dengan posisi relatif untuk item indikator
indicator-itemPengubahElemen lencana atau titik yang diposisikan sepenuhnya
indicator-topPengubahPosisikan item di tepi atas
indicator-middlePengubahPosisikan item di tengah vertikal
indicator-bottomPengubahPosisikan item di tepi bawah
indicator-startPengubahPosisikan item di tepi kiri
indicator-centerPengubahPosisikan item di tengah horizontal
indicator-endPengubahPosisikan item di tepi kanan

Penggunaan Dasar

99+ 
1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <button class="btn">Messages</button>
</div>

1
2
3
4
<div className="indicator">
  <span className="indicator-item badge badge-primary">99+</span>
  <button className="btn">Messages</button>
</div>

1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <button class="btn">Messages</button>
</div>

Penempatan Indikator

↖︎ ↑ ↗︎ ← ● → ↙︎ ↓ ↘︎
Box
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span>
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span>
  <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span>
  <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span>
  <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span>
  <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span>
  <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span>
  <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span>
  <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span>
  <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div>
</div>

Indikator di Tab

Messages Notifications 7 Requests
html 
1
2
3
4
5
6
7
8
<div class="tabs tabs-lifted">
  <a class="tab">Messages</a>
  <a class="indicator tab tab-active">
    Notifications
    <span class="indicator-item badge">7</span>
  </a>
  <a class="tab">Requests</a>
</div>

Indikator pada Input

Required
html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-neutral badge-sm">Required</span>
  <input type="text" placeholder="Your email address" class="input" />
</div>

Indikator pada Gambar

Only available for Pro users Tailwind CSS examples
html 
1
2
3
4
5
6
7
8
9
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-center badge">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src=""
  />
</div>

Indikator pada Kartu

New

Product Name

Product description and details go here.

html 
1
2
3
4
5
6
7
8
9
<div class="indicator">
  <span class="indicator-item badge badge-success">New</span>
  <div class="card card-outline">
    <div class="card-content">
      <h2 class="card-title">Product Name</h2>
      <p>Product description and details go here.</p>
    </div>
  </div>
</div>

Indikator pada Avatar

JS
html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span>
  <div class="avatar">JS</div>
</div>

Perilaku Responsif

New
html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span>
  <button class="btn">Responsive</button>
</div>