Tag

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

chakra ui pro

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#

<Tag>Sample Tag</Tag>
<HStack spacing={4}>
{["sm", "md", "lg"].map((size) => (
<Tag size={size} key={size} variant="solid" colorScheme="teal">
Teal
</Tag>
))}
</HStack>

With left icon#

<HStack spacing={4}>
{["sm", "md", "lg"].map((size) => (
<Tag size={size} key={size} variant="subtle" colorScheme="cyan">
<TagLeftIcon boxSize="12px" as={AddIcon} />
<TagLabel>Cyan</TagLabel>
</Tag>
))}
</HStack>

With right icon#

<HStack spacing={4}>
{["sm", "md", "lg"].map((size) => (
<Tag size={size} key={size} variant="outline" colorScheme="blue">
<TagLabel>Blue</TagLabel>
<TagRightIcon as={MdSettings} />
</Tag>
))}
</HStack>

With close button#

<HStack spacing={4}>
{["sm", "md", "lg"].map((size) => (
<Tag
size={size}
key={size}
borderRadius="full"
variant="solid"
colorScheme="green"
>
<TagLabel>Green</TagLabel>
<TagCloseButton />
</Tag>
))}
</HStack>

With custom element#

<Tag size="lg" colorScheme="red" borderRadius="full">
<Avatar
src="https://bit.ly/sage-adebayo"
size="xs"
name="Segun Adebayo"
ml={-1}
mr={2}
/>
<TagLabel>Segun</TagLabel>
</Tag>

Props#

colorScheme

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
"gray"

size

Type
"sm" | "md" | "lg"
Default
"md"

variant

Type
"outline" | "solid" | "subtle"
Default
"subtle"
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel