COMPONENT 63 · Content & Media

标签胶囊

Chip

也叫TagPillToken标签

用紧凑胶囊展示属性、筛选条件或可移除的小对象。

A compact pill that represents an attribute, filter, or removable object.

ANATOMY & USAGE

结构与使用建议

组成部分

胶囊容器
短标签
可选图标或移除按钮

适合使用

需要紧凑呈现少量属性、已选筛选项或对象时。

不建议使用

只是被动状态计数，或标签文字很长时。

键盘与无障碍

可操作 Chip 使用 button；移除按钮说明对象名称，选中状态不只靠颜色。

DESCRIBE IT TO AI

这样告诉编程助手

实现标签胶囊（Chip）：用紧凑胶囊展示属性、筛选条件或可移除的小对象。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo row" aria-label="已选筛选条件">
  <span>平台：Web <button type="button" aria-label="移除平台 Web">×</button>
  </span>
  <span>状态：可用 <button type="button" aria-label="移除状态 可用">×</button>
  </span>
</div>