标签 / Badge — 状态变体

共 15 个变体，覆盖内容类型标签、精选角标、作者标签、数量 Badge 等。

内容类型标签

技术 Vue3 NestJS

技术标签

蓝色淡背景 + 蓝色文字

生活旅行摄影

生活标签

粉色淡背景 + 粉色文字

Vue3 NestJS

Hover 悬浮

背景加深 + 外发光

Vue3 NestJS

选中

实色填充 + 白字

Vue3 生活

可关闭

带 × 按钮，用于筛选标签删除

特殊角标

精选

精选

琥珀色淡背景 + 琥珀边框

置顶

置顶

黑底白字，强调级别最高

推荐

推荐

绿色淡背景 + 绿色边框

新

新

红色淡背景 + 红色边框

作者作者

作者身份标签

蓝 = 宁白久，粉 = 刘小Q

数量 Badge

🔔

未读提示（红点）

小圆点，不显示具体数字

🔔 12

带数字

显示未读数量

🔔 99+

99+

超过 99 显示 99+

✅

完成状态

绿色圆点，表示正常/完成

标签云（混合展示）

Vue3 React NestJS TypeScript 旅行摄影美食 AI CSS 日常 Docker 纪念日

蓝色 = 技术标签，粉色 = 生活标签，实色 = 当前选中

设计 Tokens

类型	背景	文字	边框	圆角
技术标签	#3B82F6/10	#3B82F6	无	rounded-full
生活标签	#EC4899/10	#EC4899	无	rounded-full
精选	amber-50	amber-600	amber-200	rounded
置顶	#171717	white	无	rounded
推荐	green-50	green-600	green-200	rounded
新	red-50	red-500	red-200	rounded
数量 Badge	red-500	white	无	rounded-full