Tag
标签

进行标记和分类的小标签。

使用import { Tag } from "antd";

源码components/tag

文档

编辑此页更新日志

何时使用

用于标记事物的属性和维度。
进行分类。

代码演示

Tag 1LinkPrevent DefaultTag 2Tag 3

基本

基本标签的用法，可以通过设置 closeIcon 变为可关闭标签并自定义关闭按钮，设置为 true 时将使用默认关闭按钮。可关闭标签具有 onClose 事件。

UnremovableTag 2Tag 3New Tag

动态添加和删除

用数组生成一组标签，可以动态添加和删除。

Tag 1Tag 2Tag 3

New Tag

添加动画

使用 rc-tween-one 给标签增加添加或删除动画。

Status (filled)

successprocessingwarningerrordefault

Status (solid)

successprocessingwarningerrordefault

Status (outlined)

successprocessingwarningerrordefault

预设状态的标签

预设五种状态颜色，可以通过设置 color 为 success、 processing、error、default、warning 来代表不同的状态。

Presets (filled)

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Presets (solid)

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Presets (outlined)

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Custom (filled)

#f50#2db7f5#87d068#108ee9

Custom (solid)

#f50#2db7f5#87d068#108ee9

Custom (outlined)

#f50#2db7f5#87d068#108ee9

多彩标签

我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

可选择标签

可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。而 CheckableTagGroup 则提供了类似 CheckboxGroup 或 RadioGroup 的功能。

CheckableTag 为完全受控组件，不支持非受控用法。

TwitterYoutubeFacebookLinkedIn

图标按钮

当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

Tag 1Tag 2Tag 3

可拖拽标签

使用 dnd kit 实现的可拖拽标签。

API

通用属性参考：通用属性

Tag

参数	说明	类型	默认值	版本
classNames	语义化结构 class	Record<SemanticDOM, string>	-
closeIcon	自定义关闭按钮。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮	ReactNode	false	4.4.0
color	标签色	string	-
variant	标签变体	`'filled' \| 'solid' \| 'outlined'`	`'filled'`	6.0.0
icon	设置图标	ReactNode	-
disabled	是否禁用标签	boolean	false	6.0.0
href	点击跳转的地址，指定此属性`tag`组件会渲染成 `<a>` 标签	string	-	6.0.0
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-
target	相当于 a 标签的 target 属性，href 存在时生效	string	-	6.0.0
onClose	关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为）	(e: React.MouseEvent<HTMLElement, MouseEvent>) => void	-

Tag.CheckableTag

参数	说明	类型	默认值
checked	设置标签的选中状态	boolean	false
onChange	点击标签时触发的回调	(checked) => void	-

Tag.CheckableTagGroup

参数	说明	类型	默认值
classNames	语义化结构 class	Record<SemanticDOM, string>	-
defaultValue	初始选中值	`string \| number \| Array<string \| number> \| null`	-
disabled	禁用选中	`boolean`	-
multiple	多选模式	`boolean`	-
value	选中值	`string \| number \| Array<string \| number> \| null`	-
options	选项列表	`Array<{ label: ReactNode; value: string \| number } \| string \| number>`	-
onChange	点击标签时触发的回调	`(value: string \| number \| Array<string \| number> \| null) => void`	-

Semantic DOM

Tag.CheckableTagGroup

MoviesBooksMusicSports

root
根元素
item
单项元素

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
defaultBg	默认背景色	string	#fafafa
defaultColor	默认文字颜色	string	rgba(0,0,0,0.88)
solidTextColor	默认实心标签的文本色	string	#fff

全局 Token如何定制？

文档贡献者

API

通用属性参考：通用属性

Tag

参数	说明	类型	默认值	版本
classNames	语义化结构 class	Record<SemanticDOM, string>	-
closeIcon	自定义关闭按钮。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮	ReactNode	false	4.4.0
color	标签色	string	-
variant	标签变体	`'filled' \| 'solid' \| 'outlined'`	`'filled'`	6.0.0
icon	设置图标	ReactNode	-
disabled	是否禁用标签	boolean	false	6.0.0
href	点击跳转的地址，指定此属性`tag`组件会渲染成 `<a>` 标签	string	-	6.0.0
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-
target	相当于 a 标签的 target 属性，href 存在时生效	string	-	6.0.0
onClose	关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为）	(e: React.MouseEvent<HTMLElement, MouseEvent>) => void	-

Tag.CheckableTag

参数	说明	类型	默认值
checked	设置标签的选中状态	boolean	false
onChange	点击标签时触发的回调	(checked) => void	-

Tag.CheckableTagGroup

参数	说明	类型	默认值
classNames	语义化结构 class	Record<SemanticDOM, string>	-
defaultValue	初始选中值	`string \| number \| Array<string \| number> \| null`	-
disabled	禁用选中	`boolean`	-
multiple	多选模式	`boolean`	-
value	选中值	`string \| number \| Array<string \| number> \| null`	-
options	选项列表	`Array<{ label: ReactNode; value: string \| number } \| string \| number>`	-
onChange	点击标签时触发的回调	`(value: string \| number \| Array<string \| number> \| null) => void`	-

Token 名称

描述

类型

默认值

defaultBg

默认背景色

string

#fafafa

defaultColor

默认文字颜色

string

rgba(0,0,0,0.88)

solidTextColor

默认实心标签的文本色

string

#fff

Ant Design

Tag
标签

Ant Design

Tag
标签

何时使用

代码演示

API

Tag

Tag.CheckableTag

Tag.CheckableTagGroup

Semantic DOM

Tag

root

icon

content

Tag.CheckableTagGroup

root

item

主题变量（Design Token）

何时使用

代码演示

API

Tag

Tag.CheckableTag

Tag.CheckableTagGroup

Semantic DOM

Tag

root

icon

content

Tag.CheckableTagGroup

root

item

主题变量（Design Token）

Tag标签

Tag标签

何时使用

代码演示

API

Tag

Tag.CheckableTag

Tag.CheckableTagGroup

Semantic DOM

Tag

root

icon

content

Tag.CheckableTagGroup

root

item

主题变量（Design Token）

何时使用

代码演示

API

Tag

Tag.CheckableTag

Tag.CheckableTagGroup

Semantic DOM

Tag

root

icon

content

Tag.CheckableTagGroup

root

item

主题变量（Design Token）

Tag
标签

Tag
标签