EmptyState

Ne zaman kullanılır

EmptyState, gösterilecek bir şey olmadığında boş bir alan yerine neden boş olduğunu ve ne yapılacağını anlatmak içindir: henüz öğe eklenmemiş bir liste, sonuç vermeyen bir arama, erişilecek içeriği olmayan bir panel.

Ne zaman kullanılmaz

• Bir görevin sonucu için: ResultState kullanın.
• İçerik yüklenirken: Skeleton kullanın.
• Bir hata için: InlineAlert kullanın.

Anatomi

Henüz öğe yok

İlk öğenizi ekleyince burada listelenir.

Öğe ekleDaha fazla bilgi

AçıkKoyu

Kodu kopyala

import { Button, EmptyState, Icon } from '@bigbang/ui';

export default function Default() {
  return (
    <EmptyState
      title="Henüz öğe yok"
      description="İlk öğenizi ekleyince burada listelenir."
      actions={
        <>
          <Button startIcon={<Icon name="plus" />}>Öğe ekle</Button>
          <Button variant="tertiary">Daha fazla bilgi</Button>
        </>
      }
    />
  );
}

1. İkon alanı ya da çizim: Dekoratif.
2. Başlık: Belge başlığı.
3. Açıklama.
4. Eylemler: Bir birincil, en fazla bir ikincil.

Davranış

• Ortalanır ve içinde bulunduğu alanın genişliğini alır; metin satırı 440 px ile sınırlıdır.
• Yüklenince yumuşakça belirir.

Yönergeler

• Başlıkta neyin boş olduğunu söyleyin; “Veri yok” gibi genel ifadelerden kaçının.
• Açıklamada bir sonraki adımı anlatın.
• Kullanıcının yapabileceği bir şey yoksa eylem koymayın.

İçerik

Türkçe	İngilizce
Henüz öğe yok	No items yet
Sonuç bulunamadı	No results found
Filtreleri temizle	Clear filters

İlgili bileşenler

• ResultState: Görevin sonu.
• Skeleton: Yüklenirken.
• Heading: Başlık düzeyleri.