标签Tag
内容与数据展示用短文字标记状态、类别或条件
标签帮助用户快速识别内容的状态、类别和已选条件。颜色只能辅助扫读，文字仍要说明含义；普通标签负责展示，带关闭入口的标签可以移除筛选条件。
进行中已完成已逾期前端×
什么时候用
- 标记状态：进行中、已完成、已逾期官网改版进行中年报设计已完成
- 标记分类和属性：前端、React、VIP前端React性能优化
- 已选的筛选条件，点 × 就能移除筛选： 前端 × 近一周 ×
- 表格里的状态列，比纯文字好扫得多任务状态登录页进行中支付流已完成
什么时候不用
- 想触发动作 → 那是 按钮 Button 的活导出数据动作交给按钮，标签只负责标记
- 文案很长的标签，又长又丑没人看这是一个文案特别长的标签示例
- 一条数据挂七八个标签，等于没标紧急VIP新热门限量推荐官方独家
- 警告、报错信息 → 用 警告提示 Alert⚠ 账号存在安全风险，请立即修改密码
组成结构 · Anatomy
前端×
1标签Tag本体：小巧、彩色、只负责标记
2文案Label一两个字说清状态或分类
3关闭按钮Close可选，用于可移除的筛选条件
常见变体 · Variants
彩色标签Colored
蓝绿红灰
用颜色区分状态或分类的默认款
可关闭Closable
近一周×前端×
已选条件允许用户随手移除时
带圆点With Dot
进行中已完成
想要更轻量,只靠小圆点表状态
典型使用场景
任务状态标记
官网首页改版设计进行中
支付流程走查已完成
年度报告初稿已逾期
内容分类
如何用 AI 一周做完官网
从需求梳理到上线部署的完整记录，适合零基础。
前端AI 编程教程
3.2k 阅读
筛选条件
已选筛选：
近一周×
前端×
已完成×
共 24 条符合条件的任务
表格状态列
项目负责人状态
官网改版林小hu进行中
年报设计阿油已完成
支付重构KK已逾期