Bileşenler

EmptyState

Bir sayfa, panel ya da liste henüz boşken ya da arama sonuç vermediğinde gösterilen açıklama ve sonraki adım.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

İkon, başlık, açıklama ve bir birincil eylem. Bileşen yüklenince yumuşakça belirir.

Henüz öğe yok

İlk öğenizi ekleyince burada listelenir.

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>
        </>
      }
    />
  );
}

Sonuç yok

Arama ya da filtre sonuç vermediğinde, filtreleri temizleme gibi bir çıkış yolu sunun.

Sonuç bulunamadı

Aramanızı değiştirip yeniden deneyin.

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

export default function NoResults() {
  return (
    <EmptyState
      icon="search"
      title="Sonuç bulunamadı"
      description="Aramanızı değiştirip yeniden deneyin."
      actions={<Button variant="secondary">Filtreleri temizle</Button>}
    />
  );
}

Kart içinde

size="sm" kart, tablo ya da menü içinde kullanılır. Başlık düzeyini sayfa ana hattına göre headingLevel ile verin.

Kart başlığı

Henüz öğe yok

İlk öğenizi ekleyince burada listelenir.

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

export default function InCard() {
  return (
    <div className="max-w-sm rounded-lg border border-line-subtle bg-surface-raised p-lg">
      <Heading level={2} size="sm">
        Kart başlığı
      </Heading>
      <EmptyState size="sm" headingLevel={3} title="Henüz öğe yok" description="İlk öğenizi ekleyince burada listelenir." actions={<Button size="sm">Öğe ekle</Button>} />
    </div>
  );
}

Açık ve koyu mod

İkon alanı color-surface-sunken, ikon color-icon-subtle kullanır.

Henüz öğe yok

İlk öğenizi ekleyince burada listelenir.

Henüz öğe yok

İlk öğenizi ekleyince burada listelenir.

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>
        </>
      }
    />
  );
}