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

Demos

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

Size

Supports two sizes: large and small (default).

Shape

Supports two Shape: square(default)、circle

Color

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.

Type

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.

Invisible

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

TagGroup

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

Tag

PropertiesInstructionstypeDefaultVersion
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
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

TagGroup

PropertiesInstructionstypeDefaultVersion
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

Accessibility

ARIA

  • 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

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED