import { HStack } from "@chakra-ui/react"
import { Tag } from "@/components/ui/tag"
const Demo = () => {
return (
<HStack>
<Tag>Plain Tag</Tag>
<Tag closable>Closable Tag</Tag>
</HStack>
)
}
Setup
If you don't already have the snippet, run the following command to add the
tag snippet
chakra snippet add tagThe snippet includes a closed component composition for the Tag component.
Usage
import { Tag } from "@/components/ui/tag"<Tag>Tag here</Tag>Examples
Icon
Use the startElement prop to add an icon to the tag.
import { HStack } from "@chakra-ui/react"
import { Tag } from "@/components/ui/tag"
import { LuFileBadge, LuUserCircle } from "react-icons/lu"
const Demo = () => {
return (
<HStack>
<Tag startElement={<LuUserCircle />}>Tag 2</Tag>
<Tag startElement={<LuFileBadge />}>Top Rated</Tag>
</HStack>
)
}
Variants
Use the variant prop to change the appearance of the tag.
import { For, HStack, Stack } from "@chakra-ui/react"
import { Tag } from "@/components/ui/tag"
import { HiCheck } from "react-icons/hi"
const Demo = () => {
return (
<Stack gap="8">
<For each={["subtle", "solid", "outline", "surface"]}>
{(variant) => (
<HStack key={variant}>
<Tag variant={variant}>Gray</Tag>
<Tag variant={variant} closable>
Gray
</Tag>
<Tag endElement={<HiCheck />} variant={variant}>
Gray
</Tag>
</HStack>
)}
</For>
</Stack>
)
}
Sizes
Use the size prop to change the size of the tag.
import { For, HStack, Stack } from "@chakra-ui/react"
import { Tag } from "@/components/ui/tag"
import { HiCheck } from "react-icons/hi"
const Demo = () => {
return (
<Stack gap="8">
<For each={["sm", "md", "lg"]}>
{(size) => (
<HStack key={size}>
<Tag size={size}>Gray</Tag>
<Tag size={size} closable>
Gray
</Tag>
<Tag endElement={<HiCheck />} size={size}>
Gray
</Tag>
</HStack>
)}
</For>
</Stack>
)
}
Colors
Use the colorPalette prop to change the color of the tag.
gray
red
green
blue
teal
pink
purple
cyan
orange
yellow
import { Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { Tag } from "@/components/ui/tag"
import { HiPlus } from "react-icons/hi"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
>
<Text minW="8ch">{colorPalette}</Text>
<Tag size="sm" colorPalette={colorPalette}>
Content
</Tag>
<Tag startElement={<HiPlus />} size="sm" colorPalette={colorPalette}>
Content
</Tag>
<Tag size="sm" colorPalette={colorPalette} variant="solid" closable>
Content
</Tag>
</Stack>
))}
</Stack>
)
}
Closable
Use the closable prop to make the tag closable.
import { HStack } from "@chakra-ui/react"
import { Tag } from "@/components/ui/tag"
import { LuActivity } from "react-icons/lu"
const Demo = () => {
return (
<HStack>
<Tag startElement={<LuActivity />} closable>
Tag 1
</Tag>
<Tag closable>Tag 2</Tag>
</HStack>
)
}
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.
import { Tag } from "@/components/ui/tag"
const Demo = () => {
return (
<Tag size="sm" colorPalette="blue" maxW="200px" closable>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
molestias, laboriosam, quod, quia quidem quae voluptatem natus
exercitationem autem quibusdam
</Tag>
)
}
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.
import { For, HStack } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import { Tag } from "@/components/ui/tag"
const Demo = () => {
return (
<HStack>
<For each={["sm", "md", "lg", "xl"]}>
{(size) => (
<Tag
key={size}
rounded="full"
size={size}
startElement={
<Avatar
size="full"
src="https://i.pravatar.cc/300?u=1"
name="John Doe"
/>
}
>
Emily ({size})
</Tag>
)}
</For>
</HStack>
)
}
Render as button
Use the asChild prop to render the tag as a button.
Note: Import the Tag from @chakra-ui/react to use this prop.
import { Tag } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<Tag.Root asChild variant="solid">
<button type="submit">
<Tag.Label>Fish </Tag.Label>
<LuCheck />
</button>
</Tag.Root>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
variant | 'surface' | 'subtle' | 'solid' | 'outline' | 'surface'The variant of the component |