Badge 狀態徽章
標記一筆資料目前的狀態。
在 Storybook 開啟何時不要用
表示狀態（已完成、待審核、已退回）或數量（未讀 3）。
不要拿來當可點擊的篩選器。看起來像標籤、按下去卻有動作， 使用者要試過才知道——那應該是按鈕或 Chips。
鐵律：徽章一定要有文字
純色點、純色塊在以下情況等於消失：
- 灰階列印（後台系統的報表一定會被印出來存檔）
- 紅綠色覺障礙（約 8% 男性）
- 深色模式下的低飽和色
<Badge variant="danger">已退回</Badge>
<span className="size-2 rounded-full bg-danger" />
——這個紅點在印出來的報表上是一個灰點，在色覺障礙者眼裡是一個灰點。
預設是淡底，實色只給例外
四種狀態變體走淡底層（--{狀態}-subtle ＋ --{狀態}-subtle-foreground），
與提示框的低強度同一組 token。需要喊的場合才傳
intensity="high" 換成實色滿版。
資料表裡一律用預設。 一頁上百個徽章全用實色，高飽和色的出現面積會失控—— 色彩疲勞管的是面積 × 頻率，不是色相種類數。
改版前四種都是實色，那一排有兩個問題：
| 底色 L* | 文字 | |
|---|---|---|
| success / warning / info | 66 / 72 / 63 | 同色相深墨 |
| danger | 49 | 反白 |
一排裡有兩種極性，底色 L* 全距 23.5。眼睛把極性反轉讀成「不同種類」 而不是「不同嚴重度」——紅色那顆會跳出來，黃色那顆幾乎糊掉。 改用淡底之後全距收到 10，極性統一。
edit 是唯一刻意帶可見邊框的變體：它標記「已改動未送出」這個保留語意
（ADR-0002），必須與一般狀態分得開。
npm test 有一條守衛：狀態變體的預設樣式不得出現實色填底。
狀態對應建議
| 語意 | variant | 例 |
|---|---|---|
| 完成／通過 | success | 已完成、已核准 |
| 進行中／中性 | info | 審核中、處理中 |
| 需注意但不阻擋 | warning | 待補件、即將到期 |
| 異常／失敗 | danger | 已退回、已取消 |
| 草稿／非活躍 | secondary | 草稿、已封存 |
徽章的文字要短到能被掃視
上一節說「徽章一定要有文字」，但沒說多長。這兩條規則會互相拉扯，所以要補完。
徽章不是被「閱讀」的，是被「掃視」的——使用者的眼睛掃過一整欄狀態， 只想知道哪幾列不一樣。一旦文字長到需要停下來讀，徽章就退化成一段有底色的句子。
控制在 2–6 個字：「已完成」「待補件」「審核中」。 需要解釋原因時，把原因放進 Tooltip，徽章本身維持短。
不要放整句話：「此筆因附件資訊不完整而暫停處理」。 它會在窄欄位裡換行，把整列表格的行高撐開——而表格裡通常有幾十列， 一列變高看起來像壞掉，每列都變高則整張表要多捲一倍。
需要更多字時，換元件
| 你想說的 | 該用 |
|---|---|
| 這筆是什麼狀態（2–6 字） | Badge |
| 為什麼是這個狀態（一句話） | Badge ＋ Tooltip |
| 這一整區有問題，且要一直看得到 | Callout |
徽章不換行、也不截斷成 …——截斷後的狀態字（「已退…」）比長字還糟，
因為它看起來像一個真的狀態值。寫不短就換元件，這是唯一的解法。
取用
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/badge.json