空状態EmptyStateBeta

データがない、検索結果がない、読み込みに失敗したなどの状態を、説明と次の操作付きで表示します。

プレビュー

プロジェクトがありません

最初のプロジェクトを作成すると、環境とメンバーをまとめて管理できます。

状態とバリエーション

検索結果なし

検索やフィルターの実行結果が 0 件だったことを伝え、解除操作を近くに置きます。

一致する結果がありません

検索条件を変更するか、フィルターを解除してください。

初回状態

まだデータがない理由と、最初に取るべき操作を明確にします。

まだ素材がありません

素材をアップロードすると、一覧と検索で管理できます。

読み込み失敗

データ取得に失敗した場合は、原因と再試行操作を同じ面に置きます。

データを読み込めませんでした

ネットワークを確認してから、もう一度試してください。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
iconReactNode-タイトルの上に表示する補助アイコンです。
titleReactNode-空状態の見出しです。
descriptionReactNode-原因や次の行動を短く説明する本文です。
actionReactNode-作成、再試行、解除などの主要操作です。
childrenReactNode-補足リンクや追加アクションを配置する領域です。

使い方

import { EmptyState } from "@gunjo/ui";

export function SearchEmpty() {
  return (
    <EmptyState
      title="一致する結果がありません"
      description="検索条件を変更するか、フィルターを解除してください。"
    />
  );
}

設計の判断

  • 題は見出しとして描く。headingLevel の既定は2で、h2 から h6 まで選べます。空の画面は見出しで飛ばす読み方と相性がよいので、題を素の文にせず見出しにしています。周りの見出しの深さに合わせて渡します。
  • 中身のある箱と見た目で分ける。枠は破線、背景は淡い灰色です。カードのような実線の箱にすると「何か入っている」と読めてしまうので、まだ何も無い場所だと分かる形にしました。
  • 次の一手を置く場所を最初から持つ。icon・title・description・action の4つの口があり、action はボタンを置くための場所です。資料が言う「なぜ空なのか」と「次に何をするか」は、description と action に書き分けます。初回の空と検索結果0件で見た目を変えるのは、渡すアイコンと文言で分けます。

使用コンポーネント

EmptyStateButtonIcon

関連コンポーネント

AssetGridDataTableSearchInput

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: EmptyState空状態 (Empty State)