Tag Component · UI Design System

🎨 2 个 variant

类型=评分
(Score Chip)

Score 8.5

Score 7.2

Score 5.8

类型=排行
(Ranking Chip)

★ Ranking #1

★ Ranking #2

★ Ranking #3

📐 Spec Details

评分 chip 尺寸

96×20 / 圆角 10px

榜单 chip 尺寸

130×24 / 圆角 12px

背景

#FFFFFF（白底）

评分 chip 字号

11px / 600

榜单 chip 字号

12px / 700

dot 评分点

6×6 圆点

🎯 何时用哪种

Score Chip：展示某项目的综合分（0-10）
Ranking Chip：展示排名（#1 / #2 / #3 等）
Dot 颜色：根据分数档位配 — 黄（≥8）/ 绿（6-7.9）/ 红（<6）
位置：通常贴在标题旁 / 卡片左上角 / 强调位置

🏷️ Category Tag / Pill · 分类标签

从 Figma 「分类」「分类标签」共 29 次实例抽取。比 Score Chip 更语义化，强调"分组"或"筛选条件"。支持可关闭、可计数、可单选 3 种行为。

① 基础分类标签 · 静态展示

SUV 轿车电动车混合动力皮卡 MPV

② 可关闭 · 选中筛选项

SUV 2024 年款月供 ≤ $8,000

③ 可计数 · 带 N 项

SUV (24) 电动车 (18) 本月新款 (7)

④ 可点击选中 · Yellow 主题

⑤ 大尺寸 · 模块级

📐 规范

基础尺寸

高度 24px / 圆角 12px

大尺寸

高度 36px / 圆角 18px

内边距 H

基础 8px / 大尺寸 14px

字号

基础 12px / 大尺寸 14px

Tag · 标签 / 评分 chip 组件