EmptyState

いつ使うか

• テーブルやリストの検索結果が0件のときに使用する
• 初回利用時にまだデータが存在しない画面で使用する
• フィルター適用後に該当データがない場合に使用する

いつ使わないか

• データの読み込み中には使わない。Spinner を使用する
• エラーによってデータが表示できない場合には使わない。エラー表示を使用する
• 部分的なデータ欠損には使わない。該当フィールドに個別のプレースホルダーを表示する

Usage

import { EmptyState } from '@bi-shop-it/ui/empty-state';

<EmptyState
  description="条件を変更するか、新しいデータを追加してください。"
  icon="Search"
  title="データが見つかりません"
/>;

Props

バリエーション

デフォルト

アイコン・タイトル・説明テキストを表示する基本パターン。

<EmptyState
  description="条件を変更するか、新しいデータを追加してください。"
  icon="Search"
  title="データが見つかりません"
/>

CTA ボタン付き

children に ActionButton を渡して、次のアクションを促す。

<EmptyState
  description="最初のプロジェクトを作成して始めましょう。"
  icon="File"
  title="プロジェクトがありません"
>
  <ActionButton
    icon="Plus"
    label="プロジェクトを作成"
    size="sm"
    variant="outline"
  />
</EmptyState>

ミニマル

タイトルのみのシンプルな表示。データテーブル内など、スペースが限られる場面で使用する。

<EmptyState title="表示するデータがありません" />

アクセシビリティ

コンポーネントが内部で処理すること

• data-slot="empty-state" 属性を付与し、テスト・スタイリングの対象として識別可能にする
• テキストコンテンツのみで構成されるため、スクリーンリーダーが自然に読み上げることができる

利用者が対応すること

• title には状況を端的に伝えるテキストを設定すること
• CTA ボタンを配置する場合は、ボタン自体に適切なラベルを設定すること

関連コンポーネント

• Icon — EmptyState 内でアイコンを表示するために使用する
• ActionButton — CTA ボタンとして children に渡すことが多い
• Spinner — データ読み込み中の表示。EmptyState とは排他的に使い分ける