kaze風
EmptyState
データが存在しない場合に表示する空状態コンポーネント。sm / md / lg の3サイズに対応し、テーブルセル内の小さな表示からページ全体の大きな表示まで使い分けられます。role="status" が自動付与されます。
プレビュー
sm（テーブルセル内 / インライン用）
データがありません
md（セクション内）
まだ記事がありません
lg（ページ全体）
データがありません
まだデータが登録されていません。新しいアイテムを追加してください。
使いどころ
使う場面
- 一覧や検索結果が 0 件のとき、理由と次の行動を伝える
- 初めて使う画面で、最初の 1 件を作る導線を置く（actions に Button）
- size は置く場所に合わせる。画面全体は lg、カードやパネルの中は sm か md
使わない場面
- 読み込み中の表示。Skeleton を使う
- エラーで取得できなかったとき。原因と再試行を Alert で示す
- 画面の一部に残す注意書き。Alert を使う
- actions に primary のボタンを複数置くこと。主な行動は 1 つに絞る
使い方
<EmptyState size="sm" title="データがありません" />
<EmptyState
size="lg"
icon={<FileX size={48} />}
title="データがありません"
description="新しいアイテムを追加してください。"
actions={<Button>新規作成</Button>}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
icon | ReactNode | なし | 中央に表示するアイコン |
title必須 | string | なし | タイトルテキスト（必須） |
description | ReactNode | なし | 説明テキスト |
actions | ReactNode | なし | アクションボタンなどの要素 |
size | "sm" | "md" | "lg" | "md" | 表示サイズ。sm はテーブルセル内、md はセクション、lg はページ全体向け |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- role="status" が付き、出現時に控えめに読み上げられる。title は h3 になる
- 見出しの階層は周囲に合わせて確認する。h3 が前後と合わない場合は構造を見直す
- icon は装飾として扱い、意味は title と description で伝える
文言
- title は状態を言い切る（「プロジェクトはまだありません」「該当する結果がありません」）
- description は次の行動か、条件の変え方を書く（「キーワードを変えて検索してください」）
- actions のボタンは動詞で書く（「プロジェクトを作成する」）