Skies.ui元件 (Components)
Badge 標籤
行內狀態標籤，支援六種語意變體，適合顯示狀態、分類或計數。
Badge 標籤
Badge 是輕量行內元件，用於傳達狀態、分類或計數。以 cva 管理 variant，完整支援 forwardRef 與 className 覆寫。
預設用法
DefaultSecondaryOutline
import { Badge } from "@skies-ui/ui";
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>變體（variant）
defaultsecondarydestructiveoutlinesuccesswarning
<Badge variant="default">default</Badge>
<Badge variant="secondary">secondary</Badge>
<Badge variant="destructive">destructive</Badge>
<Badge variant="outline">outline</Badge>
<Badge variant="success">success</Badge>
<Badge variant="warning">warning</Badge>| variant | 用途 |
|---|---|
default | 主色強調（primary token） |
secondary | 次要資訊 |
destructive | 錯誤或危險 |
outline | 低調邊框樣式 |
success | 成功或啟用狀態 |
warning | 警示或待處理 |
搭配圖示
Badge 支援行內子節點，可夾入任何 SVG / Lucide icon：
已啟用
待確認
import { Check } from "lucide-react";
import { Badge } from "@skies-ui/ui";
<Badge variant="success">
<Check size={10} />
已啟用
</Badge>API 摘要
| 項目 | 說明 |
|---|---|
variant | default | secondary | destructive | outline | success | warning |
className | 額外 class，透過 cn 合併 |
ref | 轉送至底層 <span> |
| 其餘 props | 任何 <span> 原生屬性 |
badgeVariants 可單獨匯出，在非 <span> 節點重用相同視覺（例如 <a> 標籤徽章）。