Empty State

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

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

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

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>

Prop	Type	Default	Description
icon	`ReactNode`	—	Ikon visual kosong (opsional).
title	`string`	—	Judul utama empty state.
description	`string`	—	Penjelasan alasan kosong.
action	`ReactNode`	—	Aksi CTA (mis. tombol reset/tambah).
children	`ReactNode`	—	Konten tambahan custom.
...rest	`HTMLAttributes<HTMLDivElement>`	—	Props native div.

--bg-surface

Container background

--border-subtle

Container border

--text-main

Title text color

--text-muted

Description text color