Usage
import { Tag } from "@chakra-ui/react"<Tag.Root>
<Tag.Label>Tag here</Tag.Label>
</Tag.Root>Examples
Icon
Use the Tag.StartElement and Tag.EndElement components to add an icon to the
start or end of the tag
Variants
Use the variant prop to change the appearance of the tag.
Sizes
Use the size prop to change the size of the tag.
Colors
Use the colorPalette prop to change the color of the tag.
gray
red
green
blue
teal
pink
purple
cyan
orange
yellow
Closable
Use the Tag.CloseTrigger within the Tag.EndElement to make the tag closable.
Overflow
Use the maxWidth prop to control the maximum width of the tag. When the
content exceeds this width, it will be truncated with an ellipsis.
This is particularly useful when dealing with dynamic or user-generated content where the length might vary.
Avatar
The tag component has been designed to work well with the Avatar component.
Note: Set the avatar size to full to ensure it's sized correctly.
Render as button
Use the asChild prop to render the tag as a button.
Closed Component
Here's how to setup the Tag for a closed component composition.
import { Tag as ChakraTag } from "@chakra-ui/react"
import * as React from "react"
export interface TagProps extends ChakraTag.RootProps {
startElement?: React.ReactNode
endElement?: React.ReactNode
onClose?: VoidFunction
closable?: boolean
}
export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
function Tag(props, ref) {
const {
startElement,
endElement,
onClose,
closable = !!onClose,
children,
...rest
} = props
return (
<ChakraTag.Root ref={ref} {...rest}>
{startElement && (
<ChakraTag.StartElement>{startElement}</ChakraTag.StartElement>
)}
<ChakraTag.Label>{children}</ChakraTag.Label>
{endElement && (
<ChakraTag.EndElement>{endElement}</ChakraTag.EndElement>
)}
{closable && (
<ChakraTag.EndElement>
<ChakraTag.CloseTrigger onClick={onClose} />
</ChakraTag.EndElement>
)}
</ChakraTag.Root>
)
},
)
If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add tagProps
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | gray | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | md | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
variant | surface | 'subtle' | 'solid' | 'outline' | 'surface'The variant of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |
Explorer
Explore the Tag component parts interactively. Click on parts in the sidebar
to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
label
closeTrigger
startElement
endElement