Komponen / Tampilan data

Badge

Angka kecil penanda jumlah di ikon, item menu, atau tab: persetujuan menunggu, invoice jatuh tempo, notifikasi belum dibaca.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Pakai untuk jumlah yang berubah dan perlu diperhatikan: persetujuan menunggu, tagihan jatuh tempo, komentar baru.
Danger hanya bila pengguna diharapkan bertindak; jumlah biasa memakai Neutral.
Sembunyikan Badge saat jumlahnya nol — tidak ada yang perlu diperhatikan.

Hindari

Jangan memakai Badge untuk status dokumen ("Draft", "Lunas") — pakai StateLabel.
Jangan menulis angka besar penuh ("148"): di atas 99 cukup "99+"; angka persis ada di halaman tujuannya.
Jangan memberi Badge Danger di setiap item menu — kalau semuanya mendesak, tidak ada yang mendesak.

Persetujuan

Invoice

Kotak masuk

GunakanDanger hanya di item yang butuh tindakan; jumlah lain Neutral.

Persetujuan

Invoice

Kotak masuk

HindariSemua item diberi Danger sehingga tidak ada yang menonjol.

INV-2026-0192Terlambat

GunakanStatus dokumen memakai StateLabel bertulisan.

INV-2026-0192

HindariBadge dipakai sebagai label status.

Isi Badge hanya angka. Maknanya ada di label di sebelahnya ("Persetujuan") atau di aria-label.
Angka di atas 99 ditulis "99+".