Tag

Used for categorizing or labeling content

Plain Tag

Closable Tag

import { HStack, Tag } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Tag.Root>
        <Tag.Label>Plain Tag</Tag.Label>
      </Tag.Root>
      <Tag.Root>
        <Tag.Label>Closable Tag</Tag.Label>
        <Tag.EndElement>
          <Tag.CloseTrigger />
        </Tag.EndElement>
      </Tag.Root>
    </HStack>
  )
}

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

Tag 1

Top Rated

Tag 2

import { HStack, Tag } from "@chakra-ui/react"
import { LuCircleUser, LuFileBadge } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack>
      <Tag.Root>
        <Tag.StartElement>
          <LuCircleUser />
        </Tag.StartElement>
        <Tag.Label>Tag 1</Tag.Label>
      </Tag.Root>
      <Tag.Root>
        <Tag.StartElement>
          <LuFileBadge />
        </Tag.StartElement>
        <Tag.Label>Top Rated</Tag.Label>
      </Tag.Root>
      <Tag.Root>
        <Tag.Label>Tag 2</Tag.Label>
        <Tag.EndElement>
          <LuCircleUser />
        </Tag.EndElement>
      </Tag.Root>
    </HStack>
  )
}

Variants

Use the variant prop to change the appearance of the tag.

Gray

import { For, HStack, Stack, Tag } from "@chakra-ui/react"
import { HiCheck } from "react-icons/hi"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["subtle", "solid", "outline", "surface"]}>
        {(variant) => (
          <HStack key={variant}>
            <Tag.Root variant={variant}>
              <Tag.Label>Gray</Tag.Label>
            </Tag.Root>
            <Tag.Root variant={variant}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <Tag.CloseTrigger />
              </Tag.EndElement>
            </Tag.Root>
            <Tag.Root variant={variant}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <HiCheck />
              </Tag.EndElement>
            </Tag.Root>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

Sizes

Use the size prop to change the size of the tag.

Gray

import { For, HStack, Stack, Tag } from "@chakra-ui/react"
import { HiCheck } from "react-icons/hi"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <HStack key={size}>
            <Tag.Root size={size}>
              <Tag.Label>Gray</Tag.Label>
            </Tag.Root>
            <Tag.Root size={size}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <Tag.CloseTrigger />
              </Tag.EndElement>
            </Tag.Root>
            <Tag.Root size={size}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <HiCheck />
              </Tag.EndElement>
            </Tag.Root>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

Colors

Use the colorPalette prop to change the color of the tag.

gray

Content

red

Content

green

Content

blue

Content

teal

Content

pink

Content

purple

Content

cyan

Content

orange

Content

yellow

Content

import { Stack, Tag, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
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.Root size="sm" colorPalette={colorPalette}>
            <Tag.Label>Content</Tag.Label>
          </Tag.Root>
          <Tag.Root size="sm" colorPalette={colorPalette}>
            <Tag.StartElement>
              <HiPlus />
            </Tag.StartElement>
            <Tag.Label>Content</Tag.Label>
          </Tag.Root>
          <Tag.Root colorPalette={colorPalette} variant="solid">
            <Tag.Label>Content</Tag.Label>
            <Tag.EndElement>
              <Tag.CloseTrigger />
            </Tag.EndElement>
          </Tag.Root>
        </Stack>
      ))}
    </Stack>
  )
}

Closable

Use the Tag.CloseTrigger within the Tag.EndElement to make the tag closable.

Tag 1

Tag 2

import { HStack, Tag } from "@chakra-ui/react"
import { LuActivity } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack>
      <Tag.Root>
        <Tag.StartElement>
          <LuActivity />
        </Tag.StartElement>
        <Tag.Label>Tag 1</Tag.Label>
        <Tag.EndElement>
          <Tag.CloseTrigger />
        </Tag.EndElement>
      </Tag.Root>
      <Tag.Root>
        <Tag.Label>Tag 2</Tag.Label>
        <Tag.EndElement>
          <Tag.CloseTrigger />
        </Tag.EndElement>
      </Tag.Root>
    </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.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam molestias, laboriosam, quod, quia quidem quae voluptatem natus exercitationem autem quibusdam

import { Tag } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Tag.Root size="sm" colorPalette="blue" maxW="200px">
      <Tag.Label>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
        molestias, laboriosam, quod, quia quidem quae voluptatem natus
        exercitationem autem quibusdam
      </Tag.Label>
      <Tag.EndElement>
        <Tag.CloseTrigger />
      </Tag.EndElement>
    </Tag.Root>
  )
}

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.

Emily sm

Emily md

Emily lg

Emily xl

import { For, HStack, Tag } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"

const Demo = () => {
  return (
    <HStack>
      <For each={["sm", "md", "lg", "xl"]}>
        {(size) => (
          <Tag.Root key={size} size={size} rounded="full">
            <Tag.StartElement>
              <Avatar
                size="full"
                src="https://i.pravatar.cc/300?u=1"
                name="John Doe"
              />
            </Tag.StartElement>
            <Tag.Label>Emily {size}</Tag.Label>
          </Tag.Root>
        )}
      </For>
    </HStack>
  )
}

Render as button

Use the asChild prop to render the tag as a button.

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>
  )
}

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>
    )
  },
)

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

Table

Textarea

Tag

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage