PF01▸💬 Feedback · 反饋▸橫幅

Banner

橫幅

難度 ★★★★★標籤 banner · 通知 · 持續3 min read

模式簡述

Banner：頁面頂部或內容區的長條通知。通常用於系統公告、警告、操作結果。比 toast 持續、比 modal 不打斷。

我們將於 5/20 進行系統升級,屆時服務可能短暫中斷。

▸ 資訊|藍色資訊 banner

Claude Code Prompt

💬 Claude Code Prompt

參考：PF01 banner
組件：Banner.tsx

Banner：頁面頂部或內容區的長條通知。通常用於系統公告、警告、操作結果。比 toast 持續、比 modal 不打斷。

限制：
- 沒關閉按鈕
- 顏色太強
- 訊息太長

完整程式碼

Banner.tsx

"use client";
import { Info, AlertTriangle, CheckCircle2, X } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "info" | "warning" | "success" | "error";

const STYLES: Record<State, { icon: typeof Info; bg: string; text: string; msg: string }> = {
info: {
  icon: Info,
  bg: "border-sky-500/40 bg-sky-500/10",
  text: "text-sky-500",
  msg: "我們將於 5/20 進行系統升級,屆時服務可能短暫中斷。",
},
warning: {
  icon: AlertTriangle,
  bg: "border-amber-500/40 bg-amber-500/10",
  text: "text-amber-500",
  msg: "你的 API 用量已達 80% 配額,請考慮升級方案。",
},
success: {
  icon: CheckCircle2,
  bg: "border-emerald-500/40 bg-emerald-500/10",
  text: "text-emerald-500",
  msg: "部署成功!最新版本已上線。",
},
error: {
  icon: AlertTriangle,
  bg: "border-red-500/40 bg-red-500/10",
  text: "text-red-500",
  msg: "資料庫連線失敗,請聯絡管理員。",
},
};

export function Banner({ state = "info" }: { state?: State }) {
const { icon: Icon, bg, text, msg } = STYLES[state];

return (
  <div className="w-full max-w-xl">
    <div className={cn("flex items-start gap-3 rounded-lg border px-4 py-3", bg)}>
      <Icon className={cn("mt-0.5 h-4 w-4 shrink-0", text)} />
      <p className="flex-1 text-sm text-foreground">{msg}</p>
      <button className="text-muted-foreground hover:text-foreground">
        <X className="h-3.5 w-3.5" />
      </button>
    </div>
  </div>
);
}

何時用

✅ 系統維護、升級公告
✅ 用量警告（quota 80%）
✅ 重要狀態提醒（trial 即將到期）

何時別用

❌ 短暫資訊（用 toast）
❌ 需要立即決策（用 modal）
❌ 錯誤又不需要使用者注意（log 就好）

我踩過的坑

沒關閉按鈕：使用者每次都看到很煩。可關 + 記住關閉狀態。
顏色太強：紅 banner 全頁看會疲乏。info/warning/success 區分清楚。
訊息太長：banner 一行就好。長文用 modal 或外連。

模式簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關模式

搜尋