Komponen / Tampilan data
StateLabel
Label status dokumen/record. Tone menyatakan makna, bukan dekorasi — satu aturan untuk semua modul.
Import
tsx
import { StateLabel } from '@divistant/circca-react';Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| tone | 'neutral' | 'info' | 'accent' | 'warning' | 'highlight' | 'success' | 'danger' | 'neutral' | Neutral = draft/belum mulai · Info = diproses/menunggu pihak lain · Accent = aktif berjalan · Warning = butuh tindakan internal · Highlight = siap langkah berikutnya · Success = selesai/menang · Danger = batal/kalah/terlambat. |
| variant | 'subtle' | 'solid' | 'subtle' | Gaya visual. |
| size | 'sm' | 'md' | 'md' | Tinggi 20 / 24. Small untuk tabel. |
| dot | boolean | false | Titik status di depan label. |
| icon | Visual | — | Ikon di depan label (menggantikan titik). |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/state-label. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.