Skip to Content
Sponsor

Tag

Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them.

Import#

Chakra UI exports 5 Tag related components:

  • Tag: The wrapper for all the tag elements.
  • TagLabel: The label for tag's text content.
  • TagLeftIcon: The icon placed on the left side of the tag.
  • TagRightIcon: The icon placed on the right side of the tag.
  • TagCloseButton: The close button for the tag.

Usage#

Sample Tag
Editable Example
TealTealTeal
Editable Example

With left icon#

CyanCyanCyan
Editable Example

With right icon#

BlueBlueBlue
Editable Example

With close button#

GreenGreenGreen
Editable Example

With custom element#

SA
Segun
Editable Example

Props#

NameTypeDescriptionDefault
colorSchemestring-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page