Components/Empty State (AppEmptyState)
Empty State (AppEmptyState)
● Ready Web Nuxt 4 + Mobile React Native
Tampilan saat sebuah daftar atau bagian halaman belum punya data untuk ditampilkan — bukan karena gagal memuat, tapi karena datanya memang belum ada.
Import
import { AppEmptyState } from '#components'Kondisi kosong polos
Bentuk paling sederhana: judul dan deskripsi saja, tanpa aksi. Cocok untuk bagian halaman yang kosongnya bersifat informasional saja (mis. "Belum ada ulasan").
Empty State — Polos
Belum ada paket try out
Kamu belum membeli paket try out apa pun. Jelajahi katalog untuk mulai berlatih.
Kondisi kosong + aksi
Isi action-label saat ada satu langkah jelas yang bisa langsung diambil pengguna untuk keluar dari kondisi kosong ini — jangan tampilkan tombol aksi kalau tidak ada langkah nyata yang bisa ditawarkan (misalnya "Belum ada ulasan" tidak butuh tombol, "Belum ada paket dibeli" butuh).
Empty State — Dengan Aksi
Belum ada riwayat transaksi
Semua pembelian paket try out yang kamu lakukan akan muncul di sini.
Butuh detail props, events, dan slot?