Badge、Tag、Chip 長得像但用途不同，常被互相亂用；Avatar 與 presence dot 也有固定畫法。這章把三者的選用準則、狀態顏色語義、頭像形狀與堆疊規則講清楚。當你要標狀態、做篩選 chip、或排一排頭像時，就翻這頁對一下。
這是什麼
徽章僅顯示狀態或數量；標籤代表分類且可移除；篩選晶片可點選切換條件。
什麼時候用
選擇元件前先釐清用途——資訊展示、可編輯分類，還是可互動的篩選。
| 元素 | 用途 | 互動性 |
|---|---|---|
| Badge | 狀態或數量 | 無 |
| Tag | 分類 metadata | 可有 ✕ 移除 |
| Chip | 篩選、可選 | 可點選 |
這是什麼
狀態色分成功、警告、錯誤、資訊、中性五類，每種都要搭配圖示與文字，不能只靠顏色。
什麼時候用
列表、訂單、任務等需要一眼分辨狀態，且需兼顧色辨識困難的使用者。
這是什麼
標籤配色控制在八到十二色；同一列標籤過多時以「+N」收合，避免撐破版面。
什麼時候用
項目可掛多個分類標籤，需在有限空間內保持可讀。
這是什麼
數字超過 99 顯示「99+」；零則不顯示角標；放在圖示按鈕、頭像或選單項的右上角。
什麼時候用
通知、未讀訊息等需要提醒數量但不搶主視覺時。
aria-label="3 unread notifications"。這是什麼
八到十像素小圓點表示狀態，需加無障礙標籤；脈動動畫表示即時或進行中。
什麼時候用
在列表或頭像旁標示連線、同步、即時更新等狀態。
aria-label="Active"。這是什麼
個人用圓形頭像、組織用圓角方形；沒有照片時以首字母加依名稱產生的背景色顯示。
什麼時候用
顯示使用者或團隊身分，需一致尺寸與清晰的預設樣式。
alt="Alice Chen"。這是什麼
最多顯示三到五個頭像，其餘以「+N」表示；頭像略重疊並加細白框分隔。
什麼時候用
展示協作成員或負責人列表，空間有限但需暗示還有更多人。
這是什麼
在頭像右下角顯示在線狀態小圓點，大小約頭像四分之一，外圈加白邊與底圖區隔。
什麼時候用
即時協作、聊天或成員列表需要顯示在線／離線／忙碌等狀態時。
aria-label="Alice is online"。這是什麼
輸入 @ 後彈出成員建議清單，可用方向鍵選取、Enter 確認，選中後以高亮標記顯示在文字中。
什麼時候用
留言、任務描述等需要標記特定成員並通知對方時。
@ 觸發 popover：avatar + name + handle。這是什麼
可搜尋的下拉選人元件，選項含頭像與姓名；多選時以可移除的晶片列表呈現。
什麼時候用
指派負責人、選審核者、邀請協作者等需要從成員中挑選一人或多人時。
這是什麼
狀態 pill badge，可選左側 dot。
什麼時候用
列表、表格的狀態欄；需一眼辨識 Active、Pending 等。