跳到主要内容

Tag 标签

给内容归类的小方角标记：话题、类型、技术栈。表示状态用 Badge；需要可切换的筛选项用 Chip。

颜色

默认是中性色。颜色只用来区分类别，不要让它承担状态含义。

默认强调成功警告危险信息

尺寸与图标

两档尺寸：md（默认）和 sm。icon 放在文字前面。

小号默认新功能提醒

可移除

传了 onRemove 就出现移除按钮。按钮的名字默认是“移除 + 标签文字”；标签内容不是纯文字时用 removeLabel 指定。

设计前端无障碍动效

接口

属性

属性类型默认值说明
tone'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info''neutral'颜色。
size'sm' | 'md''md'尺寸。
iconReactNode—文字前的图标。
onRemove() => void—传了就出现移除按钮。
removeLabelstring—移除按钮的 aria-label，默认“移除 + 标签文字”。

无障碍

  • 标签本身是 span，没有角色；图标是装饰，对读屏隐藏。
  • 移除按钮是真的按钮：Tab 聚焦，Enter / 空格触发，名字里带着标签文字（“移除 设计”），不会一排都读成“移除”。
  • 移除后焦点会随被删掉的按钮一起消失，落回文档开头；标签多的时候，请在 onRemove 里把焦点移到相邻的标签或输入框上。
  • 一组标签建议放进 role="list" 的容器，让读屏知道一共有几个。