Tag

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

Tag

Property	Description	Type	Default	Version	Global Config
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, 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, CSSProperties> \| (info: { props })=> Record<SemanticDOM, 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, string> \| (info: { props }) => Record<SemanticDOM, 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, CSSProperties> \| (info: { props }) => Record<SemanticDOM, 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 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

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

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

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.