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.
import {
Tag,
TagLabel,
TagLeftIcon,
TagRightIcon,
TagCloseButton,
} from "@chakra-ui/react"

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-
sizestring-
variantstring-
Edit this page