# 标签 Tag

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/tag
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

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

## 安装

```bash
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

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|checkable|是否支持选中|boolean |`-`|-|
|checked|是否选中（受控模式）|boolean |`-`|-|
|closable|是否可关闭标签|boolean |`-`|-|
|defaultChecked|是否默认选中|boolean |`-`|-|
|visible|设置标签显示隐藏|boolean |`-`|-|
|color|设置标签背景颜色|string |`-`|-|
|size|标签尺寸|'small' \| 'default' \| 'medium' \| 'large' |`default`|-|
|closeIcon|自定义关闭图标|ReactNode |`-`|-|
|icon|设置图标|ReactNode |`-`|-|
|bordered|是否显示边框|Boolean |`-`|2.26.0|
|className|节点类名|string \| string[] |`-`|-|
|onClose|关闭标签回调函数|(e) => Promise<any> \| void |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|onCheck|选中的回调|(checked: boolean) => void |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt