PD05▸📊 Data Display · 資料展示▸狀態

Empty State

空狀態

難度 ★★★★★標籤 empty · illustration · cta3 min read

模式簡述

Empty State：沒有資料時顯示的畫面。要告訴使用者「沒東西」+「下一步該做什麼」。

尚無專案

建立第一個專案來開始體驗 Frontend Lab。

▸ 預設|icon + 文字

Claude Code Prompt

💬 Claude Code Prompt

參考：PD05 empty-state
組件：EmptyState.tsx

Empty State：沒有資料時顯示的畫面。要告訴使用者「沒東西」+「下一步該做什麼」。

限制：
- 只說沒資料
- illustration 太大
- 搜尋無結果跟空狀態混用

完整程式碼

EmptyState.tsx

"use client";
import { Inbox, AlertCircle, Plus, RotateCcw } from "lucide-react";

type State = "default" | "cta" | "error";

export function EmptyState({ state = "default" }: { state?: State }) {
const isError = state === "error";

return (
  <div className="grid w-full max-w-md place-items-center rounded-xl border border-dashed border-border/60 bg-background/30 px-6 py-12">
    <div
      className={`grid h-14 w-14 place-items-center rounded-full ${isError ? "bg-red-500/10" : "bg-lab-accent/10"}`}
    >
      {isError ? (
        <AlertCircle className="h-7 w-7 text-red-500" />
      ) : (
        <Inbox className="h-7 w-7 text-lab-accent" />
      )}
    </div>
    <h3 className="mt-4 text-base font-medium text-foreground">
      {isError ? "讀取失敗" : "尚無專案"}
    </h3>
    <p
      className="mt-1 max-w-xs text-center text-xs text-muted-foreground"
      style={{ fontFamily: "var(--font-zh)" }}
    >
      {isError
        ? "我們無法載入你的資料。請稍候重試。"
        : "建立第一個專案來開始體驗 Frontend Lab。"}
    </p>
    {(state === "cta" || isError) && (
      <button className="mt-4 inline-flex items-center gap-1.5 rounded-md border border-lab-accent bg-lab-accent/10 px-4 py-1.5 text-xs text-lab-accent hover:bg-lab-accent/20">
        {isError ? (
          <>
            <RotateCcw className="h-3 w-3" />
            重試
          </>
        ) : (
          <>
            <Plus className="h-3 w-3" />
            新增專案
          </>
        )}
      </button>
    )}
  </div>
);
}

何時用

✅ 首次使用沒有資料時
✅ 搜尋無結果
✅ 篩選後沒結果

何時別用

❌ 載入中（用 skeleton）
❌ 錯誤狀態（用 error state，明確說錯什麼）
❌ 永久空的區塊（直接拿掉）

我踩過的坑

只說沒資料：應該再給一個 CTA「建立第一筆」。
illustration 太大：佔半個螢幕反而像在炫技。圖案要小且有 brand 感。
搜尋無結果跟空狀態混用：兩個情境文案不同，請拆開處理。

模式簡述

尚無專案

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關模式

搜尋