logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
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

  • TabsTimeline

    Resources

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

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Tag for categorizing or markup.

    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) => 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 colorstringrgba(0, 0, 0, 0.02)
    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.

    expand codeexpand code
    Add & Remove Dynamically

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

    expand codeexpand code
    Animate

    Animating the Tag by using rc-tween-one.

    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.

    expand codeexpand code
    Draggable Tag

    Draggable tags using dnd kit.

    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.

    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.

    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.

    expand codeexpand code
    borderless

    borderless.

    expand codeexpand code
    Tag 1
    Link
    Prevent Default
    Tag 2
    Unremovable
    Tag 2
    Tag 3
    New Tag
    Tag 1Tag 2Tag 3
    New Tag
    Without icon
    success
    processing
    error
    warning
    default
    With icon
    success
    processing
    error
    warning
    waiting
    stop
    Tag 1Tag 2Tag 3
    Presets
    magenta
    red
    volcano
    orange
    gold
    lime
    green
    cyan
    blue
    geekblue
    purple
    Custom
    #f50
    #2db7f5
    #87d068
    #108ee9
    Categories:
    Movies
    Books
    Music
    Sports
    Twitter
    Youtube
    Facebook
    LinkedIn
    Tag 1
    Tag 2
    Tag 3
    Tag 4
    processing
    success
    error
    warning
    magenta
    red
    volcano
    orange
    gold
    lime
    green
    cyan
    blue
    geekblue
    purple