EmptyState

Penjelasan saat belum ada data atau tidak ada hasil, dengan langkah berikutnya yang jelas.

Dasar

Default menampilkan ikon inbox dan judul “Belum ada data”. Tambahkan description untuk menjelaskan mengapa bagian ini kosong.

Data akan muncul di sini setelah pengangkutan pertama selesai.

Slot actions menampung Button atau link. Contoh pencarian kosong berikut menyediakan aksi hapus filter yang benar-benar mengembalikan hasil.

Coba kata kunci lain atau hapus filter untuk melihat semua jadwal.

Gunakan size=sm untuk panel kecil. orientation=horizontal menempatkan ikon di samping teks mulai layar sm; layar HP tetap bertumpuk.

Laporan akan tersedia setelah data timbangan diperiksa.

Ganti ilustrasi lewat slot icon dan isi pesan lewat slot default. Slot actions menerima komponen yang sama dengan bagian aplikasi lain.

Tambahkan program pertama untuk mulai mencatat material yang berhasil didaur ulang.

Set icon=false bila teks saja sudah cukup. Slot icon, bila diisi, tetap menggantikan ikon bawaan.

Catatan tambahan akan tampil di bagian ini.

Prop	Tipe	Default	Keterangan
title	string	'Belum ada data'	Judul singkat yang menjelaskan situasi.
description	string	—	Penjelasan; digantikan slot default bila diisi.
icon	string \| false	'lucide:inbox'	Nama ikon dari koleksi Iconify mana pun. false menyembunyikan ikon bawaan.
size	'sm' \| 'md' \| 'lg'	'md'	Ruang dalam, jarak, dan ukuran ikon.
orientation	'vertical' \| 'horizontal'	'vertical'	Posisi ikon terhadap teks; horizontal menyesuaikan layar kecil.
title-tag	'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'	'h3'	Elemen judul yang mengikuti struktur halaman.

Slot	Tipe	Default	Keterangan
icon	—	—	Ilustrasi dekoratif; menggantikan prop icon.
title	—	—	Teks/konten judul, tetap dibungkus title-tag.
default	—	—	Isi pesan, menggantikan description.
actions	—	—	Tombol atau link untuk langkah selanjutnya.

Tidak ada event khusus. Interaksi berasal dari komponen yang ditempatkan dalam slot actions.