标签 Tag

用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：标签的基础用法。
• 可关闭标签：可设置 closable 属性控制标签是否可关闭，可关闭标签可通过 onClose 事件执行一些关闭后操作。也可通过 visible 属性控制标签的显示隐藏。
• 可选中：通过参数 checkable，可以实现点击选中的效果。
• 多色标签：我们提供多种预设色彩的标签样式，通过 color 设置不同颜色。如果预设值不能满足你的需求，color 字段也可以设置自定义色值。
• 动态编辑标签：可动态添加和删除标签。
• 不同尺寸：标签分为：小、中、大、巨大，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为「中」。
• 异步关闭：如果 onClose 返回一个 Promise，可以异步关闭标签，并且在未关闭时展示加载效果。
• 带图标的标签：可通过设置 icon 在标签中加入图标。
• 带边框的标签：通过参数 bordered，可以显示带边框的标签。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Tag