apps/www/content/docs/components/tag.mdx
import { Tag } from "@chakra-ui/react"
<Tag.Root>
<Tag.Label>Tag here</Tag.Label>
</Tag.Root>
:::info
If you prefer a closed component composition, check out the snippet below.
:::
Use the Tag.StartElement and Tag.EndElement components to add an icon to the
start or end of the tag
Use the variant prop to change the appearance of the tag.
Use the size prop to change the size of the tag.
Use the colorPalette prop to change the color of the tag.
Use the Tag.CloseTrigger within the Tag.EndElement to make the tag closable.
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.
<ExampleTabs name="tag-with-overflow" />This is particularly useful when dealing with dynamic or user-generated content where the length might vary.
The tag component has been designed to work well with the Avatar component.
<ExampleTabs name="tag-with-avatar" />Note: Set the avatar size to
fullto ensure it's sized correctly.
Use the asChild prop to render the tag as a button.
Here's how to setup the Tag for a closed component composition.
<ExampleCode name="tag-closed-component" />If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add tag
Explore the Tag component parts interactively. Click on parts in the sidebar
to highlight them in the preview.