Komponen Badge & Status
Penanda status ringkas dengan indikator dot aktif, pil warna, dan counter notifikasi.
Rikat Declarative / PrimeNG-StyleKomponen penanda status ringkas ala <p-badge> di PrimeNG menggunakan tag <l-badge>. Mendukung indikator titik status (dot), lencana berbentuk pil membulat (pill), ukuran bertingkat, dan overlay counter notifikasi di atas tombol/ikon.
Varian Warna Kontekstual (Severities)
<!-- PrimeNG-Style Declarative Badges -->
<l-badge value="Ngapakin V1.1" severity="primary"></l-badge>
<l-badge value="Stabil / Live" severity="success"></l-badge>
<l-badge value="Dalam Pembaruan" severity="warning"></l-badge>
<l-badge value="Kritis / Bahaya" severity="danger"></l-badge>
<l-badge value="Informasi Rilis" severity="info"></l-badge>
Indikator Dot Status Server & Pengguna
<!-- Badge dengan Atribut Dot -->
<l-badge value="Server Aktif" severity="success" dot></l-badge>
<l-badge value="Pemeliharaan Sistem" severity="warning" dot></l-badge>
<l-badge value="Koneksi Terputus" severity="danger" dot></l-badge>
Badge Kapsul Membulat (Pill Badges)
<!-- Badge Kapsul dengan Atribut Pill -->
<l-badge value="Dokumentasi" severity="primary" pill></l-badge>
<l-badge value="Tervalidasi" severity="success" pill></l-badge>
Overlay Counter Notifikasi (Notification Bubbles)
<!-- Counter Notifikasi di Atas Tombol -->
<div style="position: relative; display: inline-block;">
<l-button label="Pesan Masuk" severity="secondary" icon="mail"></l-button>
<span class="c-badge-counter">8</span>
</div>
<!-- Ikon Lonceng dengan Counter 99+ -->
<div style="position: relative;">
<l-icon name="bell"></l-icon>
<span class="c-badge-counter">99+</span>
</div>
Penerapan Status pada Riwayat Transaksi
#INV-2026-001 (Langganan Pro)
31 Okt 2026, 12:45 WIB
#INV-2026-002 (Domain Kustom)
31 Okt 2026, 11:20 WIB
#INV-2026-003 (Sertifikat SSL)
30 Okt 2026, 18:00 WIB
<!-- Lencana Status Riwayat Transaksi -->
<l-badge value="Berhasil Dibayar" severity="success" pill></l-badge>
<l-badge value="Menunggu Transfer" severity="warning" pill></l-badge>
<l-badge value="Kadaluarsa" severity="danger" pill></l-badge>