logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
6.0.0-alpha.1
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Masonry
      6.0.0
    • 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
      DEPRECATED
    • 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
When To Use
Examples
Basic
Colorful Tag
Add & Remove Dynamically
Checkable
Animate
Icon
Status Tag
Draggable Tag
API
Tag
Tag.CheckableTag
Tag.CheckableTagGroup
Semantic DOM
Tag
Tag.CheckableTagGroup
Design Token

Tag

Used for marking and categorization.
Importimport { Tag } from "antd";
Sourcecomponents/tag
Docs
Edit this pageChangelog
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
    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
    classNamesSemantic DOM classRecord<SemanticDOM, string>-
    closeIconCustom close icon. 5.7.0: close button will be hidden when setting to null or falseReactNodefalse4.4.0
    colorColor of the Tagstring-
    variantVariant of the tag'filled' | 'solid' | 'outlined''filled'6.0.0
    iconSet the icon of tagReactNode-
    disabledWhether the tag is disabledbooleanfalse6.0.0
    hrefThe address to jump when clicking, when this property is specified, the tag component will be rendered as an <a> tagstring-6.0.0
    stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-
    targetThe target attribute of the a tag, which takes effect when href is specifiedstring-6.0.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-

    Tag.CheckableTagGroup

    参数说明类型默认值版本
    classNamesSemantic DOM classRecord<SemanticDOM, string>-
    defaultValueInitial valuestring | number | Array<string | number> | null-
    disabledDisable check/uncheckboolean-
    multipleMultiple select modeboolean-
    stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-
    valueValue of checked tag(s)string | number | Array<string | number> | null-
    optionsOption listArray<{ label: ReactNode; value: string | number } | string | number>-
    onChangeCallback when Tag is checked/unchecked(value: string | number | Array<string | number> | null) => void-

    Semantic DOM

    Tag

    Tag.CheckableTagGroup

    Design Token

    Component TokenHow to use?
    Token NameDescriptionTypeDefault Value
    defaultBgDefault background colorstring#fafafa
    defaultColorDefault text colorstringrgba(0,0,0,0.88)
    solidTextColorDefault text color for solid tag.string#fff
    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
    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. CheckableTagGroup provides function that is similar to CheckboxGroup or RadioGroup.

    CheckableTag is absolute controlled component and has no uncontrolled mode.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    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
    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
    Tag 1LinkPrevent DefaultTag 2Tag 3
    UnremovableTag 2Tag 3New Tag
    Tag 1Tag 2Tag 3
    New Tag
    Status (filled)
    successprocessingwarningerrordefault
    Status (solid)
    successprocessingwarningerrordefault
    Status (outlined)
    successprocessingwarningerrordefault
    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
    Yes
    MoviesBooksMusicSports
    MoviesBooksMusicSports
    TwitterYoutubeFacebookLinkedIn
    Tag 1Tag 2Tag 3
    Ant Design
    • root
      6.0.0
      Root element
    • icon
      6.0.0
      Icon element
    • content
      6.0.0
      Content element
    MoviesBooksMusicSports
    • root
      Root element
    • item
      Item element