Badge 徽章

在元素角落標記數量或狀態。使用 Element Plus 的 el-badge。

設計準則

• 數字用於「需要知道有幾件」(待審核 12 件);小紅點用於「知道有新東西就好」(新訊息提示)
• 數字一律設 max(常用 99),避免四位數撐破版面
• 徽章顏色預設 danger 紅,代表「待處理」;非警示性的計數用 type="primary" 或 info
• 處理完要歸零消失,不要殘留 0

基本用法

loading

最大值

loading

小紅點

loading

偏移量

徽章預設貼在右上角;壓到圓角、圖標時用 offset="[x, y]" 微調(x 正值往右、y 正值往下):

loading

Do / Don't

✅ Do	❌ Don't
需要數量才用數字	什麼都掛數字
設 max="99"	顯示「1024」撐破角落
處理完消失	殘留「0」

給工程師

完整 API 見 Element Plus Badge 文件。 本站規範優先於 EP 文件中的視覺建議。