Callout 提示框

在畫面上就地說明一件事的狀態或原因。

何時不要用

✅ 這樣做

資訊屬於這個區塊、需要一直看得到（例如「這 3 筆缺少收件資訊」）。

🚫 不要這樣

不要拿來報「操作成功」——那是短暫回饋，該用 toast 或就地狀態變化。一個永遠停在畫面上的「儲存成功」，三分鐘後只會讓人困惑。

四種語意

這批資料已全部完成

共 12 筆，最後一筆於 2024-02-05 完成。

TIP小提醒

可以用欄位篩選一次比對多個單位。

有 3 筆缺少必要資訊

未填寫前無法進入下一步。

E-104配額不足，無法確認

項目「丙案初版」可用量 2，需求 6。

success ✓ · warning ⚠ · info 💡 · danger ⊗

圖示不是裝飾，是第二條線索。顏色被剝掉（列印、色覺障礙）時，圖示仍在。

✅ 這樣做

標題：「配額不足，無法確認」——一句話講完發生什麼事。

🚫 不要這樣

標題：「錯誤」。這句話沒有任何資訊，使用者還是得讀內文。

tag 欄位放規則代號（E-104）：使用者回報問題時報得出代號，客服就不必猜。

npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/callout.json