@chakra-ui/tag
v3.1.1
Published
This component displays as a tag with an optional link and/or button to remove the given tag.
Downloads
2,164,002
Readme
Tag
This component is displayed as an accessible tag with an optional link and/or button to remove it.
Installation
yarn add @chakra-ui/tag
Import component
import { Tag } from "@chakra-ui/tag"
Basic Usage
<Tag />
Sizes
Pass the size
prop to change the size of the tag.
<>
<Tag size="sm" colorScheme="gray">
Gray
</Tag>
<Tag colorScheme="gray">Gray</Tag>
<Tag size="lg" colorScheme="gray">
Gray
</Tag>
</>
Color
Pass the colorScheme
prop to change the background color of the tag component
<>
<Tag colorScheme="pink">Pink</Tag>
</>
With icon
The tag component can contain an Icon. This is done by using the TagIcon
component within the tag component.
<>
<Tag colorScheme="cyan">
<TagIcon size="12px" as={AddIcon} />
<TagLabel>Green</TagLabel>
</Tag>
</>
With close button
Use the TagCloseButton
to apply a close button to the tag component.
<Tag variant="solid" size="sm" colorScheme="cyan">
<TagLabel>Tab Label</TagLabel>
<TagCloseButton />
</Tag>
With custom element
Tag component can contain a custom element. This is done by placing the custom element within the tag component.
<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>
<TagCloseButton />
</Tag>