# Tag

- Page: https://jiguang132.com/resources/arco-design/docs/tag
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used for information selection, screening and classification. Users use tags for information feedback and interactive operations.

## Install

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

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage of tags.
- **Close**: The `closable` attribute can be set to control whether the label can be closed, and the closed label can perform some post-closing operations through the `onClose` event. You can also control the display and hide of the label through the `visible` property.
- **Check**: Through the prop `checkable`, the effect of clicking and selecting can be achieved.
- **Color**: We provide a variety of label styles with preset colors, and set different colors through `color`. If the preset value cannot meet your needs, you can also set a custom color value in the `color` field.
- **Active**: Can add and delete tags dynamically.
- **Size**: Labels are divided into: small, medium, large, huge, you can choose the appropriate button size in different scenarios. The recommended and default size is "medium".
- **Close async**: If `onClose` returns a `Promise`, the tag can be closed asynchronously and the loading effect will be displayed when it is not closed.
- **Icon**: An icon can be added to the label by setting `icon`.
- **Bordered**: Through the prop `bordered` to display a bordered tag.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Tag

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|checkable|Whether the Tag is checkable|boolean |`-`|-|
|checked|Used for setting the currently selected value(Controlled Component)|boolean |`-`|-|
|closable|Whether the Tag is closable|boolean |`-`|-|
|defaultChecked|Initial checked state|boolean |`-`|-|
|visible|Whether the Tag is visible|boolean |`-`|-|
|color|The background color of Tag|string |`-`|-|
|size|The size of Tag|'small' \| 'default' \| 'medium' \| 'large' |`default`|-|
|closeIcon|Custom Close Icon|ReactNode |`-`|-|
|icon|Set icon|ReactNode |`-`|-|
|bordered|Whether the tag is bordered|Boolean |`-`|2.26.0|
|className|Additional css class|string \| string[] |`-`|-|
|onClose|Callback when the tag closed|(e) => Promise<any> \| void |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|onCheck|Callback when checked the tag|(checked: boolean) => void |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt