Tag

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

Install

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