# Tag

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

Used for marking and categorization.


## When To Use

- It can be used to tag by dimension or property.

- When categorizing.

## Examples


- Basic · `basic`
- Colorful Tag · `colorful`
- Add & Remove Dynamically · `control`
- Checkable · `checkable`
- Animate · `animation`
- Icon · `icon`
- Status Tag · `status`

- Draggable Tag · `draggable`


- Custom semantic dom styling · `style-class`

## API

Common props ref：[Common props](#jguang-common-props)

### Tag

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | false | 4.4.0 | 5.14.0 |
| color | Color of the Tag | string | `default` when `variant="solid"` | `solid` default color: 6.4.0 | × |
| disabled | Whether the tag is disabled | boolean | false | 6.0.0 | × |
| href | The address to jump when clicking, when this property is specified, the `tag` component will be rendered as an `<a>` tag | string | - | 6.0.0 | × |
| icon | Set the icon of tag | ReactNode | - |  | × |
| onClose | Callback executed when tag is closed (can be prevented by `e.preventDefault()`) | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | 6.0.0 |
| target | Same as target attribute of a, works when href is specified | string | - | 6.0.0 | × |
| variant | Variant of the tag | `'filled' \| 'solid' \| 'outlined'` | `'filled'` | 6.0.0 | 6.0.0 |
| ~~bordered~~ | Whether has border style, please use `variant="filled"` instead | boolean | true | - | × |

### Tag.CheckableTag

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checked | Checked status of Tag | boolean | false |  |
| icon | Set the icon of tag | ReactNode | - | 5.27.0 |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |  |

### Tag.CheckableTagGroup

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-group), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-group), string> | - |  |
| defaultValue | Initial value | `string \| number \| Array<string \| number> \| null` | - |  |
| disabled | Disable check/uncheck | `boolean` | - |  |
| multiple | Multiple select mode | `boolean` | - |  |
| options | Option list. Object options support per-item `className` and `style`. | `Array<{ className?: string; label: ReactNode; style?: CSSProperties; value: string \| number } \| string \| number>` | - | `className` and `style`: 6.4.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-group), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-group), CSSProperties> | - |  |
| value | Value of checked tag(s) | `string \| number \| Array<string \| number> \| null` | - |  |
| onChange | Callback when Tag is checked/unchecked | `(value: string \| number \| Array<string \| number> \| null) => void` | - |  |

## Semantic DOM

### Tag

| Semantic node | Native description | Version |
| --- | --- | --- |
| `root` | Root element with inline-block display, auto height, padding, font size, line height, nowrap, background color, border, border radius, opacity, transition animations, text alignment, relative positioning and other basic tag styles | 6.0.0 |
| `icon` | Icon element with font size, color, cursor style, transition animations and other icon display styles | 6.0.0 |
| `content` | Content element with text content color, font styles and other content area styles | 6.0.0 |
| `close` | Close element with close button layout, cursor styles, transition animations and other interaction styles | 6.4.0 |

Semantic description source: `vendor/components/tag/demo/_semantic.tsx`

### Tag.CheckableTagGroup {#semantic-group}

| Semantic node | Native description | Version |
| --- | --- | --- |
| `root` | Root element with tag group container styles and layout | — |
| `item` | Tag item element with inline-block display, height, padding, font size, line height, background color, border, border radius, opacity, transition animation, checkable state and other styles | — |

Semantic description source: `vendor/components/tag/demo/_semantic_group.tsx`

## Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

| Token | Type | Native description |
| --- | --- | --- |
| `defaultBg` | `string` | Default background color |
| `defaultColor` | `string` | Default text color |
| `solidTextColor` | `string` | Default text color for solid tag. |

Declaration source: `vendor/components/tag/style/index.ts`

```ts
import type React from 'react';

import { unit } from '@ant-design/cssinjs';

import type { CSSInterpolation } from '@ant-design/cssinjs';

import { FastColor } from '@ant-design/fast-color';

import { AggregationColor } from '../../color-picker/color';

import { isBright } from '../../color-picker/components/ColorPresets';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 默认背景色
   * @descEN Default background color
   */
  defaultBg: string;
  /**
   * @desc 默认文字颜色
   * @descEN Default text color
   */
  defaultColor: string;

  /**
   * @desc 默认实心标签的文本色
   * @descEN Default text color for solid tag.
   */
  solidTextColor: string;
}

export interface TagToken extends FullToken<'Tag'> {
  tagFontSize: number;
  tagLineHeight: React.CSSProperties['lineHeight'];
  tagIconSize: number | string;
  tagPaddingHorizontal: number;
  tagBorderlessBg: string;
}
```


## Shared native props {#jguang-common-props}


> Tips: The following generic properties apply to most antd components; those not supported are described separately.

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |


## Install and reproduce an example

```bash
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
```

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

## Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

- `vendor/components/tag/CheckableTag.tsx`
- `vendor/components/tag/CheckableTagGroup.tsx`
- `vendor/components/tag/index.tsx`
- `vendor/components/tag/style/index.ts`
- `vendor/components/tag/style/statusCmp.ts`

## Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.

---

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