"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
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#
<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) => (<Tagsize={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'><Avatarsrc='https://bit.ly/sage-adebayo'size='xs'name='Segun Adebayo'ml={-1}mr={2}/><TagLabel>Segun</TagLabel></Tag>
Props#
colorScheme
colorScheme
Type
Default
"gray"
size
size
Type
"sm" | "md" | "lg"
Default
"md"
variant
variant
Type
"subtle" | "solid" | "outline"
Default
"subtle"