Boş durumlar

Boş bir alan kullanıcıya ne olduğunu ve sırada ne olduğunu söylemelidir. Bu kalıp üç boş durumu ayırır: ilk kullanım, sonuç yok ve tamamlandı.

Ne zaman kullanılır

• İlk kullanım: kullanıcı henüz hiçbir şey oluşturmadığında. Tek bir birincil eylem işi başlatır.
• Sonuç yok: arama ya da filtre hiçbir kayıtla eşleşmediğinde. Ne arandığını söyler, filtreleri temizlemeyi sunar.
• Tamamlandı: tüm öğeler işlendiğinde. Eylem gerekmez.

Canlı örnek

Üç tür yan yana; her biri EmptyState bileşenidir. Bir ikon, durumu söyleyen bir başlık, tek cümlelik bir açıklama ve en fazla bir eylem taşır.

Canlı örnek, StorybookStorybook'ta aç

Henüz proje yok

Projeler işi gruplar ve ekibinizle paylaşır.

Proje oluştur

“Rapor” için sonuç yok

Yazımı denetleyin ya da filtreleri gevşetin.

Filtreleri temizle

Tüm öğeler işlendi

Bekleyen öğe kalmadı.

AçıkKoyu

Kodu kopyala

import { Button, Card, createDataTableColumnHelper, DataTable, EmptyState, Grid, type IconName } from '@bigbang/ui';
import type { ReactNode } from 'react';
import { type Lang, LangProvider } from '../lang';

const copy = {
  tr: {
    firstUse: { heading: 'Henüz proje yok', text: 'Projeler işi gruplar ve ekibinizle paylaşır.', action: 'Proje oluştur' },
    noResults: { heading: '“Rapor” için sonuç yok', text: 'Yazımı denetleyin ya da filtreleri gevşetin.', action: 'Filtreleri temizle' },
    cleared: { heading: 'Tüm öğeler işlendi', text: 'Bekleyen öğe kalmadı.' },
    tableCaption: 'Proje listesi',
    tableName: 'Ad',
    tableEmpty: 'Henüz proje yok',
  },
  en: {
    firstUse: { heading: 'No projects yet', text: 'Projects group work and share it with your team.', action: 'Create project' },
    noResults: { heading: 'No results for “Report”', text: 'Check the spelling or loosen the filters.', action: 'Clear filters' },
    cleared: { heading: 'All items are handled', text: 'No pending items are left.' },
    tableCaption: 'Project list',
    tableName: 'Name',
    tableEmpty: 'No projects yet',
  },
};

export type EmptyKind = 'first-use' | 'no-results' | 'cleared' | 'table';

/** One empty state: a decorative icon, a heading that names the state, one sentence and at most one primary action. */
function Empty({ icon, heading, text, action }: { icon: IconName; heading: string; text: string; action?: string }) {
  return (
    <Card variant="outlined" padding="md">
      <EmptyState size="sm" headingLevel={3} icon={icon} title={heading} description={text} actions={action ? <Button>{action}</Button> : undefined} />
    </Card>
  );
}

type Row = { id: string; name: string };
const helper = createDataTableColumnHelper<Row>();

/** The three kinds of empty state, built with EmptyState (in a Card here) and Button. Pass `kind` to show one. */
export function EmptyStatesDemo({ lang = 'tr', kind }: { lang?: Lang; kind?: EmptyKind }) {
  const t = copy[lang];
  const columns = [helper.accessor('name', { header: t.tableName, meta: { rowHeader: true } })];
  const parts: Record<EmptyKind, ReactNode> = {
    'first-use': <Empty icon="plus" heading={t.firstUse.heading} text={t.firstUse.text} action={t.firstUse.action} />,
    'no-results': <Empty icon="search" heading={t.noResults.heading} text={t.noResults.text} action={t.noResults.action} />,
    cleared: <Empty icon="circle-check" heading={t.cleared.heading} text={t.cleared.text} />,
    table: <DataTable<Row> columns={columns} data={[]} getRowId={(row) => row.id} caption={t.tableCaption} captionHidden status="empty" messages={{ empty: t.tableEmpty }} />,
  };
  return (
    <LangProvider lang={lang}>
      {kind ? (
        <div className="max-w-md">{parts[kind]}</div>
      ) : (
        <Grid columns={{ base: 1, md: 3 }} gap="lg">
          {parts['first-use']}
          {parts['no-results']}
          {parts.cleared}
        </Grid>
      )}
    </LangProvider>
  );
}

Boş bir tablo yalnızca başlık satırını göstermez. DataTable durumu empty olduğunda tek bir mesaj satırı gösterir.

Canlı örnek, StorybookStorybook'ta aç

Proje listesi

Ad
Henüz proje yok

AçıkKoyu

Kodu kopyala

import { Button, Card, createDataTableColumnHelper, DataTable, EmptyState, Grid, type IconName } from '@bigbang/ui';
import type { ReactNode } from 'react';
import { type Lang, LangProvider } from '../lang';

const copy = {
  tr: {
    firstUse: { heading: 'Henüz proje yok', text: 'Projeler işi gruplar ve ekibinizle paylaşır.', action: 'Proje oluştur' },
    noResults: { heading: '“Rapor” için sonuç yok', text: 'Yazımı denetleyin ya da filtreleri gevşetin.', action: 'Filtreleri temizle' },
    cleared: { heading: 'Tüm öğeler işlendi', text: 'Bekleyen öğe kalmadı.' },
    tableCaption: 'Proje listesi',
    tableName: 'Ad',
    tableEmpty: 'Henüz proje yok',
  },
  en: {
    firstUse: { heading: 'No projects yet', text: 'Projects group work and share it with your team.', action: 'Create project' },
    noResults: { heading: 'No results for “Report”', text: 'Check the spelling or loosen the filters.', action: 'Clear filters' },
    cleared: { heading: 'All items are handled', text: 'No pending items are left.' },
    tableCaption: 'Project list',
    tableName: 'Name',
    tableEmpty: 'No projects yet',
  },
};

export type EmptyKind = 'first-use' | 'no-results' | 'cleared' | 'table';

/** One empty state: a decorative icon, a heading that names the state, one sentence and at most one primary action. */
function Empty({ icon, heading, text, action }: { icon: IconName; heading: string; text: string; action?: string }) {
  return (
    <Card variant="outlined" padding="md">
      <EmptyState size="sm" headingLevel={3} icon={icon} title={heading} description={text} actions={action ? <Button>{action}</Button> : undefined} />
    </Card>
  );
}

type Row = { id: string; name: string };
const helper = createDataTableColumnHelper<Row>();

/** The three kinds of empty state, built with EmptyState (in a Card here) and Button. Pass `kind` to show one. */
export function EmptyStatesDemo({ lang = 'tr', kind }: { lang?: Lang; kind?: EmptyKind }) {
  const t = copy[lang];
  const columns = [helper.accessor('name', { header: t.tableName, meta: { rowHeader: true } })];
  const parts: Record<EmptyKind, ReactNode> = {
    'first-use': <Empty icon="plus" heading={t.firstUse.heading} text={t.firstUse.text} action={t.firstUse.action} />,
    'no-results': <Empty icon="search" heading={t.noResults.heading} text={t.noResults.text} action={t.noResults.action} />,
    cleared: <Empty icon="circle-check" heading={t.cleared.heading} text={t.cleared.text} />,
    table: <DataTable<Row> columns={columns} data={[]} getRowId={(row) => row.id} caption={t.tableCaption} captionHidden status="empty" messages={{ empty: t.tableEmpty }} />,
  };
  return (
    <LangProvider lang={lang}>
      {kind ? (
        <div className="max-w-md">{parts[kind]}</div>
      ) : (
        <Grid columns={{ base: 1, md: 3 }} gap="lg">
          {parts['first-use']}
          {parts['no-results']}
          {parts.cleared}
        </Grid>
      )}
    </LangProvider>
  );
}

Kurallar

Kural	Değer
Birincil eylem	En fazla 1. İlk kullanımda “Proje oluştur”; sonuç yokta “Filtreleri temizle”; tamamlandıda eylem yok.
Başlık	Durumu söyler: “Henüz proje yok”. “Veri yok” yazmayın.
Açıklama	Tek cümle, en fazla 25 sözcük.
Sonuç yok	Aranan ifadeyi başlıkta gösterir: ““Rapor” için sonuç yok”.
Boş tablo	Başlık ızgarası tek başına gösterilmez; status="empty" ya da "filtered-empty" kullanılır.
İllüstrasyon	İsteğe bağlı ve süstür; anlam taşımaz, aria-hidden olur.
Başlık düzeyi	Sayfa yapısına uyar; örnekte headingLevel={3}; kart içindeki küçük boyut size="sm".

Henüz proje yok

Proje oluştur

YapınBaşlık durumu söyler, tek eylem yolu açar.

Veri yok

Boş.Proje oluşturİçe aktar

YapmayınGenel başlık ve rekabet eden iki eylem yön göstermez.

Davranış

1. Veri yüklendiğinde ve hiç kayıt yoksa, durumun türü belirlenir: hiç oluşturulmadı mı, filtre mi eşleşmedi, hepsi mi işlendi.
2. İlgili boş durum liste alanının yerine gelir. Sayfa başlığı ve filtre çubuğu yerinde kalır.
3. Birincil eylem işi başlatır ya da filtreleri temizler. Temizleme sonrası liste yeniden dolar ve odak ilk denetime gider.
4. İlk kullanımdan sonra ilk kayıt oluşturulduğunda boş durum listeye dönüşür.

Erişilebilirlik

• Başlık gerçek bir başlık öğesidir; ekran okuyucu durumu başlık gezintisiyle bulur.
• İkon ve illüstrasyon aria-hidden taşır; anlam metinde verilir.
• Eylem gerçek bir düğmedir ve görünür adı vardır.
• Durum bir arama ya da filtre sonucuysa, sonuç değişikliği Filtreleme kalıbındaki gibi nazikçe duyurulur.
• Renk tek başına anlam taşımaz (WCAG 1.4.1).

İçerik

• Başlık durumu söyler: “Henüz proje yok”, “Tüm öğeler işlendi”.
• Açıklama bir sonraki adımı ya da nedeni söyler: “Projeler işi gruplar ve ekibinizle paylaşır.”
• Sonuç yokta aranan ifadeyi alıntılayın ve çıkış yolunu verin.
• Düğme fiille başlar ve nokta içermez: “Proje oluştur”.
• Kullanıcıyı suçlamayın; “Hiçbir şey bulamadınız” yazmayın.

Hareket

Öğe	Hareket	Preset
Boş durumun belirmesi	110 ms solma; kayma yok	motion.reveal
Birincil düğme	Basınca 0,97 ölçek	motion.press
Yenileme ve filtre sonrası	Giriş hareketi yok	yok

Hareketi azaltma tercihinde ölçek ve kaymalar kalkar, yalnızca kısa solma kalır.

Kullanılan bileşenler

EmptyState, Card, Button, DataTable. İlgili kalıplar: Filtreleme, Toplu işlemler.