Show · Tag
Tag component is used to display a collection of concise information for rapid identification and grouping.


How to import

Basic usage

To use this tag, just wrap the content with the <Tag> tag.
It can be turned into a closable label by adding the closable property.
At this time, clicking x to close will trigger the onClose event, and blocking the default event in onClose can make it still show and not hide after clicking


Supports two sizes: large and small (default).


Supports two Shape: square(default)、circle


Tag supports 16 colors including whites from Semi's palette: amber, blue, cyan, green, grey, indigo, light-blue, light-green, lime, orange, pink, purple, red, teal, violet, yellow, white. You can also customize color through style.


Tag supports three different types, including: light(default), ghost, solid.

Avatar Tag

You can get a avatar tag with avatarSrc property. avatarShape can change the shape of avatar tag including square(default) and circle.


You can use visible property to control whether the tag is visible.


You can pass in configs for tags through tagList to create a TagGroup. The maxTagCount can be used to cap the number of list and will be displayed as +N when the limit is exceeded.
Set the showPopover property to control whether the remaining content is displayed by Popover when hover to + N Tag
If the tags in the TagGroup can be deleted, the user needs to process the tagList passed to the TagGroup in onTagClose

API Reference


avatarShapeShape of avatar tag, one of square and circlestringsquare1.6.0
avatarSrcSource address of avatar tagstring-1.6.0
classNameClass namestring
closableToggle whether the tag can be closedbooleanfalse
colorColor of tags, one of amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowwhitestringgrey
prefixIconprefix iconReactNode2.44.0
suffixIconsuffix iconReactNode2.44.0
shapeShape of tag, one of squarecirclestringsquare2.20.0
sizeSize, one of small, largestringsmall
styleInline styleobject
typeStyle type, one of ghost, solid, lightstringlight
visibleToggle the visibility of the tagbooleantrue
tagKeyThe key required by React, as the unique identifier of each tag, does not allow repetitionstringnumber
onClickCallback function when clicking the tag(e: MouseEvent) => void-
onCloseCallback function when the tag is closed(tagChildren: ReactNode, e: MouseEvent, tagKey: string | number ) => void-e is available in v1.18, tagKey is available in v2.18.0


avatarShapeShape of avatar tag, one of square and circlestringsquare1.6.0
classNameClass namestring
maxTagCountCap number to display, shown as + N when exceedednumber
popoverPropsPopover configuration properties, you can control the popup props like direction, zIndex, trigger, refer to PopoverPopoverProps{}
showPopoverWhen hover to + N, whether to display the remaining content through Popoverbooleanfalse
sizeSize, one of small, largestringsmall
styleInline styleCSSProperties
tagListLabel Group data(TagProps)[]
onTagCloseThe callback function when deleting the Tag in the TagGroup(tagChildren: ReactNode, e: MouseEvent, tagKey: string | number ) => void-2.18.0



  • aria-label is used to indicate the role of Tag, for deleteable or clickable Tag , we recommend using this attribute

Keyboard and Focus

  • If the current Tag is interactive, then this Tag can be focused. Such as:
    • When the onClick attribute is used, the keyboard user can activate this Tag with the Enter keys
    • When the closable property is true, keyboard users can delete this Tag by pressing the Delete key
    • When a Tag is focused, keyboard users can use the Esc key to defocus the currently focused Tag

Content Guidelines

  • Due to limited space, label text should be as short as possible
  • avoid line breaks
  • use sentence case

Design Tokens