Tag

Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

Chakra UI exports 5 Tag related components:

Tag: The wrapper for all the tag elements.
TagLabel: The label for tag's text content.
TagLeftIcon: The icon placed on the left side of the tag.
TagRightIcon: The icon placed on the right side of the tag.
TagCloseButton: The close button for the tag.

import {
  Tag,
  TagLabel,
  TagLeftIcon,
  TagRightIcon,
  TagCloseButton,
} from "@chakra-ui/react"

Usage#

Sample Tag

<Tag>Sample Tag</Tag>

<Tag>Sample Tag</Tag>

Editable Example

TealTealTeal

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag size={size} key={size} variant="solid" colorScheme="teal">
      Teal
    </Tag>
  ))}
</HStack>

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag size={size} key={size} variant="solid" colorScheme="teal">
      Teal
    </Tag>
  ))}
</HStack>

Editable Example

With left icon#

CyanCyanCyan

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag size={size} key={size} variant="subtle" colorScheme="cyan">
      <TagLeftIcon boxSize="12px" as={AddIcon} />
      <TagLabel>Cyan</TagLabel>
    </Tag>
  ))}
</HStack>

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag size={size} key={size} variant="subtle" colorScheme="cyan">
      <TagLeftIcon boxSize="12px" as={AddIcon} />
      <TagLabel>Cyan</TagLabel>
    </Tag>
  ))}
</HStack>

Editable Example

With right icon#

BlueBlueBlue

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag size={size} key={size} variant="outline" colorScheme="blue">
      <TagLabel>Blue</TagLabel>
      <TagRightIcon as={MdSettings} />
    </Tag>
  ))}
</HStack>

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag size={size} key={size} variant="outline" colorScheme="blue">
      <TagLabel>Blue</TagLabel>
      <TagRightIcon as={MdSettings} />
    </Tag>
  ))}
</HStack>

Editable Example

With close button#

GreenGreenGreen

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag
      size={size}
      key={size}
      borderRadius="full"
      variant="solid"
      colorScheme="green"
    >
      <TagLabel>Green</TagLabel>
      <TagCloseButton />
    </Tag>
  ))}
</HStack>

<HStack spacing={4}>
  {["sm", "md", "lg"].map((size) => (
    <Tag
      size={size}
      key={size}
      borderRadius="full"
      variant="solid"
      colorScheme="green"
    >
      <TagLabel>Green</TagLabel>
      <TagCloseButton />
    </Tag>
  ))}
</HStack>

Editable Example

With custom element#

Segun

<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>
</Tag>

<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>
</Tag>

Editable Example

Props#

Name	Type	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`	`"gray"`
size	`"sm" \| "md" \| "lg"`	`"md"`
variant	`"outline" \| "solid" \| "subtle"`	`"subtle"`

Edit this page