Tag

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

Import#

Chakra UI exports 4 Tag related components:

Tag: The wrapper for all the tag elements
TagLabel: The label for tag's text content.
TagIcon: The icon for the tag
TagCloseButton: The close button for the tag.

import { Tag, TagIcon, TagLabel, TagCloseButton } from "@chakra-ui/core";

import { Tag, TagIcon, TagLabel, TagCloseButton } from "@chakra-ui/core";

Usage#

Sample Tag

<Tag>Sample Tag</Tag>

<Tag>Sample Tag</Tag>

Editable Example

Gray

<Stack spacing={4} isInline>
  {["sm", "md", "lg"].map(size => (
    <Tag size={size} key={size} variantColor="gray">
      Gray
    </Tag>
  ))}
</Stack>

<Stack spacing={4} isInline>
  {["sm", "md", "lg"].map(size => (
    <Tag size={size} key={size} variantColor="gray">
      Gray
    </Tag>
  ))}
</Stack>

Editable Example

With left icon#

Cyan

<Stack spacing={4} isInline>
  {["sm", "md", "lg"].map(size => (
    <Tag size={size} key={size} variantColor="cyan">
      <TagIcon icon="add" size="12px" />
      <TagLabel>Cyan</TagLabel>
    </Tag>
  ))}
</Stack>

<Stack spacing={4} isInline>
  {["sm", "md", "lg"].map(size => (
    <Tag size={size} key={size} variantColor="cyan">
      <TagIcon icon="add" size="12px" />
      <TagLabel>Cyan</TagLabel>
    </Tag>
  ))}
</Stack>

Editable Example

With right icon#

Cyan

Teal

<Stack spacing={4} isInline>
  <Tag variantColor="cyan">
    <TagLabel>Cyan</TagLabel>
    <TagIcon icon="check" size="12px" />
  </Tag>

  {/* You can also use custom svg icons */}
  <Tag variantColor="teal">
    <TagLabel>Teal</TagLabel>
    <TagIcon icon={MdSettings} />
  </Tag>
</Stack>

<Stack spacing={4} isInline>
  <Tag variantColor="cyan">
    <TagLabel>Cyan</TagLabel>
    <TagIcon icon="check" size="12px" />
  </Tag>
  {/* You can also use custom svg icons */}
  <Tag variantColor="teal">
    <TagLabel>Teal</TagLabel>
    <TagIcon icon={MdSettings} />
  </Tag>
</Stack>

Editable Example

With close button#

Cyan

<Stack spacing={4} isInline>
  {["sm", "md", "lg"].map(size => (
    <Tag
      size={size}
      key={size}
      rounded="full"
      variant="solid"
      variantColor="cyan"
    >
      <TagLabel>Cyan</TagLabel>
      <TagCloseButton />
    </Tag>
  ))}
</Stack>

<Stack spacing={4} isInline>
  {["sm", "md", "lg"].map(size => (
    <Tag
      size={size}
      key={size}
      rounded="full"
      variant="solid"
      variantColor="cyan"
    >
      <TagLabel>Cyan</TagLabel>
      <TagCloseButton />
    </Tag>
  ))}
</Stack>

Editable Example

With custom element#

Segun

<Tag variantColor="red" rounded="full">
  <Avatar
    src="https://bit.ly/sage-adebayo"
    size="xs"
    name="Segun Adebayo"
    ml={-1}
    mr={2}
  />
  <TagLabel>Segun</TagLabel>
</Tag>

<Tag variantColor="red" rounded="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	Description
`variant`	`solid`, `subtle`, `outline`	`subtle`	The variant style of the tag component.
`size`	`sm`, `md`, `lg`	`lg`	The size of the tag component.
`variantColor`	`string`	`gray`	The color scheme of the tag variant.

Proudly made in 🇳🇬

Released under the MIT License.

Tag

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

With left icon#

With right icon#

With close button#

With custom element#

Props#

Import#