Komponen / Tampilan data
EmptyState
Isi pengganti saat area data kosong: belum ada data, tidak ada hasil pencarian, atau tidak punya izin — selalu dengan penjelasan dan langkah berikutnya.
Import
tsx
import { EmptyState } from '@divistant/circca-react';Props
Juga menerima semua atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| icon | Visual | — | Ikon yang mewakili isi kosong (Tray, MagnifyingGlass, LockSimple). 48 di Default, 32 di Compact, warna fg/subtle. |
| title | ReactNode | — | Apa yang kosong dalam bahasa pengguna ("Belum ada PO customer"). |
| description | ReactNode | — | Kenapa kosong dan apa yang bisa dilakukan berikutnya. |
| actions | ReactNode | — | Tombol Button size="md": Secondary dulu lalu Primary paling kanan. Kosongkan bila tidak ada aksi. |
| size | 'default' | 'compact' | 'default' | Default (lebar maks. 400, padding 32) untuk halaman/tabel; Compact (320, padding 16) untuk panel dan kartu. |
| titleAs | 'h2' | 'h3' | 'h4' | 'p' | 'h3' | Elemen judul — sesuaikan dengan hierarki heading halaman. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/empty-state. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.