Tag

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

    SourceTheme Source@chakra-ui/tag

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.Root
src='https://bit.ly/sage-adebayo'
size='xs'
name='Segun Adebayo'
ml={-1}
mr={2}
>
<Avatar.Image />
<Avatar.Fallback />
</Avatar.Root>
<TagLabel>Segun</TagLabel>
</Tag>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel