logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Tag

Used for marking and categorization.
Importimport { Tag } from "antd";
Sourcecomponents/tag
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

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

  • When categorizing.

Examples

API

Common props ref:Common props

Tag

PropertyDescriptionTypeDefaultVersion
closeIconCustom close icon. 5.7.0: close button will be hidden when setting to null or falseReactNodefalse4.4.0
colorColor of the Tagstring-
iconSet the icon of tagReactNode-
borderedWhether has border stylebooleantrue5.4.0
onCloseCallback executed when tag is closed(e: React.MouseEvent<HTMLElement, MouseEvent>) => void-

Tag.CheckableTag

PropertyDescriptionTypeDefault
checkedChecked status of Tagbooleanfalse
onChangeCallback executed when Tag is checked/unchecked(checked) => void-

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
defaultBgDefault background colorstring#fafafa
defaultColorDefault text colorstringrgba(0,0,0,0.88)
Global TokenHow to use?
Basic

Usage of basic Tag, and it could be closable and customize close button by set closeIcon property, will display default close button when closeIcon is setting to true. Closable Tag supports onClose events.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Add & Remove Dynamically

Generating a set of Tags by array, you can add and remove dynamically.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Animate

Animating the Tag by using rc-tween-one.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status Tag

We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Draggable Tag

Draggable tags using dnd kit.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Colorful Tag

We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Checkable

CheckableTag works like Checkbox, click it to toggle checked state.

it is an absolute controlled component and has no uncontrolled mode.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Icon

Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.

If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
borderless

borderless.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1LinkPrevent DefaultTag 2Tag 3
UnremovableTag 2Tag 3New Tag
Tag 1Tag 2Tag 3
New Tag
Without icon
successprocessingerrorwarningdefault
With icon
successprocessingerrorwarningwaitingstop
Tag 1Tag 2Tag 3
Presets
magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
Custom
#f50#2db7f5#87d068#108ee9
Categories:MoviesBooksMusicSports
TwitterYoutubeFacebookLinkedIn
Tag 1Tag 2Tag 3Tag 4
processingsuccesserrorwarningmagentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple