動態徽章

標籤、狀態與未讀數都用得上的徽章。count 變化時每一位數字以 spring 滾動到新值，位數增加時新位從左側長出、減少時收攏，超過 maxCount 顯示「99+」；計數從無到有時整顆計數泡彈入。開啟 removable 後右側出現 ×，點擊時徽章縮小、淡出並收攏寬度，動畫結束才呼叫 onRemove；放進 StatusBadge.Group 時，鄰居會以 FLIP 平順補位。pulse 會在左側加上一顆向外擴散的圓點，適合「LIVE」等即時狀態。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<StatusBadge/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/status-badge.json

使用

import { StatusBadge } from "@/components/ui/status-badge";

<StatusBadge count={12} countLabel={(n) => `未讀 ${n} 則`}>
  收件匣
</StatusBadge>

<StatusBadge variant="destructive" pulse>
  LIVE
</StatusBadge>

可移除的標籤列：把多個徽章放進 StatusBadge.Group（內含 AnimatePresence + flex 容器），由父層管理清單，onRemove 時把該項移除即可。

const [tags, setTags] = React.useState(["設計系統", "無障礙", "效能"]);

<StatusBadge.Group label="文章標籤">
  {tags.map((tag) => (
    <StatusBadge
      key={tag}
      variant="outline"
      removable
      onRemove={() => setTags((prev) => prev.filter((t) => t !== tag))}
    >
      {tag}
    </StatusBadge>
  ))}
</StatusBadge.Group>

Props

StatusBadge.Group

細節

• 逐位滾動：每一位數字是一個 overflow-hidden 欄，內放 0–9 直列，以 spring 把 y 滾到目標；個位先滾、高位依序跟上。數字一律 tabular-nums，寬度不會跳動。
• 移除流程：點 × 時徽章以 scale→0、opacity→0、寬度收攏退場，結束後才呼叫 onRemove；徽章本身帶 layout="position"，在 flex 容器裡新增或移除時鄰居以 FLIP 補位（只動位置、不縮放文字）。
• 自己組容器也可以：把徽章放進 <AnimatePresence mode="popLayout"> + 一個 relative flex 容器，父層管理清單即可；StatusBadge.Group 就是這個組合。
• 節奏變數：退場時長預設 150ms，可用 --wb-status-badge-duration 覆寫（例如 200ms）；脈衝圓點顏色預設跟隨文字色，可用 --wb-status-badge-pulse-color 覆寫。

可及性

• 計數動畫對輔助科技隱藏，另以 aria-live="polite" 的 sr-only 文字宣告，內容由 countLabel 產生（例如「未讀 12 則」）
• 脈衝圓點與圖示皆為 aria-hidden
• × 是 type="button"，aria-label 預設為「移除」加上徽章文字；聚焦時按 Enter、Space、Delete 或 Backspace 都能移除，並有 focus-visible 外框
• StatusBadge.Group 提供 label 時為 role="group" 並帶 aria-label
• 使用者系統開啟「減少動態效果」時，數字直接替換、脈衝停止擴散只留靜態圓點、移除時只淡出不縮放，鄰居直接到位