Empty State

İçerik bulunmadığında gösterilen aksiyonlu yer tutucu.

EmptyState.tsx

Henüz Kayıtlı Bir Mimari Katman Yok

Tasarım sisteminize ilk katmanı ekleyerek bileşen ağacını ve değişkenleri yapılandırmaya başlayın.

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/empty-state.json

Kullanım Örneği

import { EmptyState } from "@/components/feedback/EmptyState"

<EmptyState
  presetIcon="search"
  title="Sonuç bulunamadı"
  description="Filtreleri temizleyip yeniden deneyin."
  actionLabel="Filtreleri temizle"
  onAction={clearFilters}
  secondaryActionLabel="Tüm kayıtlar"
  secondaryActionHref="/records"
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
title	ReactNode	—	Boş durum başlığı.
description	ReactNode	—	Kapsayıcıya aria-describedby ile bağlanan isteğe bağlı açıklama.
icon	ReactNode	—	Preset ikonu değiştiren özel içerik; null ile ikon alanını gizler.
presetIcon	"blueprint" \| "search" \| "folder" \| "layers" \| "code" \| "warning"	"folder"	Hazır dekoratif ikon.
iconLabel	string	—	Anlam taşıyan özel ikonun erişilebilir adı.
actionLabel	string	—	Birincil aksiyon etiketi.
onAction	() => void	—	Birincil aksiyon callback'i.
actionHref	string	—	Birincil aksiyonu bağlantıya dönüştüren rota.
secondaryActionLabel	string	—	İkincil aksiyon etiketi.
onSecondaryAction	() => void	—	İkincil aksiyon callback'i.
secondaryActionHref	string	—	İkincil aksiyonu bağlantıya dönüştüren rota.
children	ReactNode	—	Hazır aksiyonların yerine gösterilen özel alt içerik.
size	"sm" \| "md" \| "lg"	"md"	İç boşluk ve tipografi ölçeği.
as	"section" \| "div" \| "article"	"section"	Render edilen semantik kapsayıcı.
headingLevel	2 \| 3 \| 4 \| 5 \| 6	3	Başlığın belge hiyerarşisindeki seviyesi.
actionsLabel	string	"Boş durum aksiyonları"	Hazır aksiyon grubunun erişilebilir etiketi.