Tag

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

    Theme source

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>
Edit this page on GitHub