N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
数据展示 / 04

标签 · 徽章

用于压缩信息密度的三类小型标记:表达分类与状态的 Tag、表达数量与提醒的 Badge、表达在线与运行状态的 Status 灯,以及它们的可关闭、可组合形态。

Tag 全样式

solid / outline / soft / 语义色
基础形态
实心 · 推荐 描边 · 分类 柔和 · 草稿 Featured Beta Draft
语义色
已完成 已失败 待审核 处理中 实验特性
带状态点 · 带图标
运行中 已失败 警告 处理中 实验 已归档
带图标
已同步 15 分钟前 12 条评论 8,420 次浏览

可关闭标签

chip + tag-input
标签输入框(回车新增 · × 删除)
设计系统 组件库 Tailwind 深色模式

输入内容后按回车即可生成新标签,点击标签右下角的 × 或按退格键可删除。

纯展示型可关闭标签
已选条件 1 已选条件 2 已选条件 3
筛选条件
数码 3C ¥200–¥500 现货

徽章 Badge

.badge
数字 / 文字 / 红点
5 12 99+ 99+
NEW HOT 已认证 草稿
附着在图标与头像上
3 99+ 陈 王
标签页与导航角标
共 128 笔订单近 30 天累计下单金额 ¥42,880
3 笔待付款订单最早一笔将于今天 18:00 自动取消3
96 笔已完成订单其中 82 笔已评价

状态灯 Status

ok / err / warn / run / idle
五种状态
正常 · 服务健康 失败 · 需要排查 警告 · 接近阈值 处理中 · 正在同步 空闲 · 等待调度 已连接 · 延迟 12ms
在列表中的应用
order-service华东 2 区 · 4 个实例运行中
report-service华东 2 区 · 2 个实例异常
pay-service华北 1 区 · 6 个实例灰度中
user-service华南 1 区 · 3 个实例限流中
archive-service冷备节点 · 0 个实例空闲

组合场景

card / table / title
Pro 限时

团队版年度订阅

不限成员数量,含全部组件源码与行业模块模板。

源码交付 1 年更新 专属答疑
库存充足剩余 2 天
进行中 #PR-2481

设计令牌同步任务

将 Figma 变量同步到代码仓库,并生成 Tailwind 主题配置。

设计 自动化 需复核
同步中 68%12 文件
已失败 3

支付服务灰度发布

灰度批次 2 出现 500 错误,已自动回滚至上一稳定版本。

pay-service v2.4.1 已回滚
错误率 4.2%