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.
Kapan dipakai
Gunakan
- Tempatkan di area yang seharusnya berisi data (badan tabel, daftar, panel), bukan sebagai halaman terpisah.
- Bedakan keadaannya: belum ada data → aksi membuat; tidak ada hasil → hapus filter; tanpa izin → siapa pemberi akses.
- Maksimal satu Primary; aksi kedua sebagai Secondary di kirinya.
- Saat data masih dimuat, tampilkan Skeleton — EmptyState baru muncul setelah hasil benar-benar kosong.
Hindari
- Jangan menampilkan "Tidak ada data" tanpa penjelasan atau langkah berikutnya.
- Jangan memakai EmptyState untuk error memuat — pakai Banner Danger dengan tombol "Coba lagi".
- Jangan memakai ilustrasi besar berwarna; ikon fg/subtle cukup agar tidak bersaing dengan isi layar.
Contoh benar & salah
Belum ada PO customer
PO customer yang diterima dari sales akan muncul di sini.
Tidak ada data
Tidak ada hasil untuk ‘Graha’
Coba kata kunci lain atau hapus filter Status: Draft.
Tidak ada hasil untuk ‘Graha’
Belum ada PO dengan kata kunci ini.
Penulisan
- Judul menyebut objeknya: "Belum ada PO customer", "Tidak ada hasil untuk ‘Graha’", "Anda tidak punya akses ke Piutang".
- Deskripsi satu–dua kalimat: kenapa kosong + apa yang bisa dilakukan. Hindari menyalahkan pengguna.
- Label tombol berupa kata kerja: "Buat PO", "Hapus filter", "Minta akses".