logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.27.6
  • Components Overview
  • Changelog
    v5.27.6
  • 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
When To Use
Examples
Basic
Colorful Tag
Add & Remove Dynamically
Checkable
Animate
Icon
Status Tag
borderless
Draggable Tag
API
Tag
Tag.CheckableTag
Design Token

Tag

Used for marking and categorization.
Importimport { Tag } from "antd";
GitHub
components/tagIssueOpen issues
Docs
Edit this page
contributors
TableTimeline

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
X
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
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
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

PropertyDescriptionTypeDefaultVersion
checkedChecked status of Tagbooleanfalse
iconSet the icon of tagReactNode-5.27.0
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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Add & Remove Dynamically

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Animate

Animating the Tag by using rc-tween-one.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Draggable Tag

Draggable tags using dnd kit.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Checkable

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

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Icon

You can add a custom icon to the tag via the icon prop. Note that the icon prop for CheckableTag is only supported in version >=5.27.0.

If you need to control the icon position, please use the <XXXIcon /> component directly in children instead of the icon prop.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
borderless

borderless.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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
Tag with icon
TwitterYoutubeFacebookLinkedIn
CheckableTag with icon
TwitterYoutubeFacebookLinkedIn
Tag 1Tag 2Tag 3Tag 4
processingsuccesserrorwarningmagentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple