标签Tag
你可能会说
文章得标出是教程还是新闻，让人一眼能分出来。
标签是用短文字标记内容状态、类别、属性或筛选条件的组件订单旁的“已支付”或筛选区的“北京”都可用标签。颜色只辅助扫读，文字必须表达含义；带关闭入口的标签才可移除条件。
什么时候用
- 标记状态：进行中、已完成、已逾期官网改版进行中年报设计已完成
- 标记分类和属性：前端、React、VIP前端React性能优化
- 已选的筛选条件，点 × 就能移除筛选： 前端 × 近一周 ×
- 表格里的状态列，比纯文字好扫得多任务状态登录页进行中支付流已完成
什么时候不用
- 需要触发操作：使用 按钮 Button导出数据动作交给按钮，标签只负责标记
- 文案过长的标签会挤占空间，也难以扫读这是一个文案特别长的标签示例
- 一条数据挂七八个标签，等于没标紧急VIP新热门限量推荐官方独家
- 警告或报错信息：使用 警告提示 Alert⚠ 账号存在安全风险，请立即修改密码
组成结构 · Anatomy
前端×
本体：小巧、彩色、只负责标记
用简短文字说清状态或分类
可选，用于可移除的筛选条件
常见变体 · Variants
彩色标签Colored
蓝绿红灰
需要用颜色辅助区分状态或分类时
可关闭Closable
近一周×前端×
已选条件允许用户直接移除时
带圆点With Dot
进行中已完成
用文字说明状态，小圆点只辅助辨认
典型使用场景
任务状态标记
官网首页改版设计进行中
支付流程走查已完成
年度报告初稿已逾期
内容分类
如何用 AI 规划官网内容
从需求梳理到上线部署的完整记录，适合零基础。
前端AI 编程教程
3.2k 阅读
筛选条件
已选筛选：
近一周×
前端×
已完成×
共 24 条符合条件的任务
表格状态列
项目负责人状态
官网改版林小hu进行中
年报设计阿油已完成
支付重构KK已逾期
延伸阅读 · 权威出处