徽标 Badge

用简短的文字标出状态或属性：牌照状态、服务「即将推出」、审核结果、所选的国家。徽标不可点击，需要点击的请用按钮或链接。

状态徽标

examples/badge/variants.html

类型	用途	类名
实心	已生效、需要强调的属性（持牌）	bg-navy text-navy-foreground
中性	未开始、即将推出、申请中	border border-border bg-muted text-muted-foreground
品牌	推荐、新功能	bg-accent text-accent-foreground
成功 / 警告 / 错误	流程状态	bg-success/10 text-success 等，前面加 6px 圆点

共用类名：inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium

紧凑版（放在标题旁、列表行内）：px-2 py-0.5，图标 size-3。

标签

方角标签用于已选项目（多选的结果）与代码类信息（牌照代码、币种）。

examples/badge/tags.html

深色背景

examples/badge/on-dark.html

使用建议

推荐

• 文案控制在 2–6 个字，不写完整句子
• 状态类徽标同时用颜色和文字（或图标）表达，不要只靠颜色

避免

• 用徽标代替按钮
• 同一行放 3 种以上颜色的徽标

无障碍

• 徽标里的图标、圆点是装饰，加 aria-hidden="true"
• 如果状态只出现在徽标里（例如表格的「状态」列），确保表头或 aria-label 能说明它是什么

与 v2 的差异

v2 现状	规范
小号徽标使用 text-[11px]	统一为 text-xs（12px），中文 11px 可读性差
没有成功 / 警告色，审核结果只能用品牌蓝或灰色	新增 success、warning 语义色
深色背景徽标 bg-sky/10，天蓝文字对比度 4.3	改为 bg-sky/5，对比度 4.7