Live Docs

Data Display /

stable

Empty State

Komponen fallback saat data kosong, belum tersedia, atau hasil filter tidak ditemukan.

import { EmptyState } from "@naraya/ui";

Overview

EmptyState membantu user memahami kenapa konten tidak tampil, sekaligus memberi next action yang jelas.

Examples

Default

Belum ada data
Mulai tambahkan data pertama untuk melihat daftar di sini.
<EmptyState
  icon={<Database size={20} />}
  title="Belum ada data"
  description="Mulai tambahkan data pertama..."
/>

With action

Hasil tidak ditemukan
Coba ubah kata kunci atau reset filter pencarian.
<EmptyState
  title="Hasil tidak ditemukan"
  description="Coba ubah kata kunci..."
  action={<Button>Reset filter</Button>}
/>

Custom child content

Workspace belum aktif
Hubungkan workspace Anda untuk melanjutkan sinkronisasi.

Jika butuh bantuan, hubungi admin sistem.

<EmptyState title="Workspace belum aktif" description="...">
  <Text size="sm" variant="muted">Hubungi admin sistem.</Text>
</EmptyState>

Props

PropTypeDefaultDescription
iconReactNodeIkon visual kosong (opsional).
titlestringJudul utama empty state.
descriptionstringPenjelasan alasan kosong.
actionReactNodeAksi CTA (mis. tombol reset/tambah).
childrenReactNodeKonten tambahan custom.
...restHTMLAttributes<HTMLDivElement>Props native div.

Tokens Used

--bg-surface

Container background

--border-subtle

Container border

--text-main

Title text color

--text-muted

Description text color

Accessibility

  • Berikan title/description yang menjelaskan sebab dan tindakan berikutnya.
  • Pastikan aksi utama dapat diakses keyboard dan memiliki label jelas.
  • Hindari hanya menampilkan ikon tanpa teks penjelasan.