Tag

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

Installation

1yarn add @teste-ui/tag

Import component

1import { Tag } from "@teste-ui/tag"

Basic Usage

1<Tag />

Sizes

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

1<>
2  <Tag size="sm" colorScheme="gray">
3    Gray
4  </Tag>
5  <Tag colorScheme="gray">Gray</Tag>
6  <Tag size="lg" colorScheme="gray">
7    Gray
8  </Tag>
9</>

Color

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

1<>
2  <Tag colorScheme="pink">Pink</Tag>
3</>

With icon

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

1<>
2  <Tag colorScheme="cyan">
3    <TagIcon size="12px" as={AddIcon} />
4    <TagLabel>Green</TagLabel>
5  </Tag>
6</>

With close button

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

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

With custom element

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

1<Tag size="lg" colorScheme="red" borderRadius="full">
2  <Avatar
3    src="https://bit.ly/sage-adebayo"
4    size="xs"
5    name="Segun Adebayo"
6    ml={-1}
7    mr={2}
8  />
9  <TagLabel>Segun</TagLabel>
10  <TagCloseButton />
11</Tag>