Komponen / Tampilan data
Badge
Angka kecil penanda jumlah di ikon, item menu, atau tab: persetujuan menunggu, invoice jatuh tempo, notifikasi belum dibaca.
Import
tsx
import { Badge } from '@divistant/circca-react';Props
Juga menerima atribut <span> (aria-label, aria-hidden, dll.). Badge tidak dirender bila count = 0 kecuali showZero.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| count | number | string | — | Angka yang ditampilkan (properti Figma "Count"). Angka di atas max otomatis menjadi "99+". |
| tone | 'danger' | 'accent' | 'neutral' | 'danger' | Danger = butuh tindakan, Accent = baru/belum dibaca, Neutral = informasi. |
| max | number | 99 | Batas angka sebelum ditulis "<max>+". |
| showZero | boolean | false | Tetap tampilkan Badge saat count = 0. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge), mis. posisi absolute di pojok ikon. |
Sumber
Kode komponen ada di packages/react/src/components/badge. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.