Komponen / Tampilan data
Badge
Angka kecil penanda jumlah di ikon, item menu, atau tab: persetujuan menunggu, invoice jatuh tempo, notifikasi belum dibaca.
Tone
Danger untuk hal yang butuh tindakan, Accent untuk yang baru atau belum dibaca, Neutral untuk jumlah informatif.
4Persetujuan menunggu — butuh tindakan Anda7Komentar belum dibaca18Draf tersimpan — informasi saja
import { Badge } from '@divistant/circca-react';
// Tone mengikuti makna angka, bukan selera warna.
export default function Example() {
return (
<div className="grid gap-3 type-callout-default text-default">
<span className="inline-flex items-center gap-2">
<Badge tone="danger" count={4} aria-label="4 persetujuan menunggu" />
Persetujuan menunggu — butuh tindakan Anda
</span>
<span className="inline-flex items-center gap-2">
<Badge tone="accent" count={7} aria-label="7 komentar belum dibaca" />
Komentar belum dibaca
</span>
<span className="inline-flex items-center gap-2">
<Badge tone="neutral" count={18} aria-label="18 dokumen draf" />
Draf tersimpan — informasi saja
</span>
</div>
);
}Di menu dan ikon
Di ujung kanan item sidebar, atau menempel di pojok ikon notifikasi. Angka di atas 99 ditulis "99+".
import { Badge } from '@divistant/circca-react';
import { Bell, CheckSquareOffset, Receipt, Tray } from '@phosphor-icons/react';
// Badge di sidebar dan di ikon notifikasi. Angka di atas 99 otomatis menjadi "99+".
const menu = [
{ label: 'Persetujuan', icon: CheckSquareOffset, count: 12, tone: 'danger' as const },
{ label: 'Invoice jatuh tempo', icon: Receipt, count: 3, tone: 'danger' as const },
{ label: 'Kotak masuk', icon: Tray, count: 148, tone: 'neutral' as const },
];
export default function Example() {
return (
<div className="flex flex-wrap items-start gap-8">
<nav aria-label="Modul" className="grid w-60 gap-0.5">
{menu.map(item => (
<a
key={item.label}
href="#"
className="flex items-center gap-2 rounded-lg px-2 py-1.5 type-body-default text-default hover:bg-action-hover"
>
<item.icon size={18} aria-hidden className="text-muted" />
<span className="flex-1">{item.label}</span>
<Badge tone={item.tone} count={item.count} aria-label={`${item.count} item`} />
</a>
))}
</nav>
<button
type="button"
aria-label="Notifikasi, 5 belum dibaca"
className="relative flex size-9 items-center justify-center rounded-full text-default hover:bg-action-hover"
>
<Bell size={20} aria-hidden />
<Badge tone="danger" count={5} aria-hidden className="absolute -top-0.5 -right-0.5" />
</button>
</div>
);
}