---
title: "Indicator"
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 Indicator for notification badges and status overlays. Nine placement positions for avatars, buttons, and cards—no JavaScript required."
url: https://frutjam.com/id/components/indicator
---
# Indicator Component
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 |
| ---------------- | -------- | ----------------------------------------------------- |
| indicator | Basis | Pembungkus dengan posisi relatif untuk item indikator |
| indicator-item | Pengubah | Elemen lencana atau titik yang diposisikan sepenuhnya |
| indicator-top | Pengubah | Posisikan item di tepi atas |
| indicator-middle | Pengubah | Posisikan item di tengah vertikal |
| indicator-bottom | Pengubah | Posisikan item di tepi bawah |
| indicator-start | Pengubah | Posisikan item di tepi kiri |
| indicator-center | Pengubah | Posisikan item di tengah horizontal |
| indicator-end | Pengubah | Posisikan item di tepi kanan |
## Penggunaan Dasar
## Penempatan Indikator
```html