@chakra-ui/tag

What is @chakra-ui/tag?

@chakra-ui/tag is a component library from Chakra UI that provides a set of accessible, customizable, and reusable tag components for React applications. These tags can be used to display labels, categories, or any other type of information that needs to be highlighted or categorized.

What are @chakra-ui/tag's main functionalities?

Basic Tag

This feature allows you to create a basic tag component that can be used to display simple labels or categories.

import { Tag } from '@chakra-ui/react';

function BasicTag() {
  return <Tag>Sample Tag</Tag>;
}

Tag with Color Scheme

This feature allows you to create a tag with a specific color scheme, making it easy to differentiate between different types of tags.

import { Tag } from '@chakra-ui/react';

function ColoredTag() {
  return <Tag colorScheme='green'>Green Tag</Tag>;
}

Tag with Icon

This feature allows you to add an icon to your tag, providing a visual cue to the user about the tag's purpose or category.

import { Tag, TagLabel, TagLeftIcon } from '@chakra-ui/react';
import { CheckIcon } from '@chakra-ui/icons';

function TagWithIcon() {
  return (
    <Tag>
      <TagLeftIcon boxSize='12px' as={CheckIcon} />
      <TagLabel>Tag with Icon</TagLabel>
    </Tag>
  );
}

Closable Tag

This feature allows you to create a tag that can be closed or removed by the user, providing a way to manage tags dynamically.

import { Tag, TagLabel, TagCloseButton } from '@chakra-ui/react';

function ClosableTag() {
  return (
    <Tag>
      <TagLabel>Closable Tag</TagLabel>
      <TagCloseButton />
    </Tag>
  );
}

Other packages similar to @chakra-ui/tag

react-tag-input

react-tag-input is a popular package for creating and managing tags in React applications. It provides a flexible and customizable tag input component, but it may not offer the same level of accessibility and design consistency as @chakra-ui/tag.

react-tags

react-tags is another package for creating tag input fields in React. It offers a simple and straightforward API for adding and removing tags, but it lacks the built-in styling and accessibility features provided by @chakra-ui/tag.

react-tag-autocomplete

react-tag-autocomplete is a package that combines tag input functionality with autocomplete suggestions. It is useful for applications that require users to select tags from a predefined list, but it may not be as customizable or accessible as @chakra-ui/tag.

README

Tag

This component is displayed as an accessible tag with an optional link and/or button to remove it.

Installation

yarn add @chakra-ui/tag

Import component

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

Basic Usage

<Tag />

Sizes

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

<>
  <Tag size="sm" colorScheme="gray">
    Gray
  </Tag>
  <Tag colorScheme="gray">Gray</Tag>
  <Tag size="lg" colorScheme="gray">
    Gray
  </Tag>
</>

Color

Pass the colorScheme prop to change the background color of the tag component

<>
  <Tag colorScheme="pink">Pink</Tag>
</>

With icon

The tag component can contain an Icon. This is done by using the TagIcon component withtin the tag component.

<>
  <Tag colorScheme="cyan">
    <TagIcon size="12px" as={AddIcon} />
    <TagLabel>Green</TagLabel>
  </Tag>
</>

With close button

Use the TagCloseButton to apply a close button to the tag component.

<Tag variant="solid" size="sm" colorScheme="cyan">
  <TagLabel>Tab Label</TagLabel>
  <TagCloseButton />
</Tag>

With custom element

Tag component can contain a custom element. This is done by placing the custom element within the tag component.

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