Tag

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

View sourceView theme 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>

<Tag>Sample Tag</Tag>

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

<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>

<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>

<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>

<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>

<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

"subtle" | "solid" | "outline"

Default

"subtle"