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.

Usage#

Sample Tag
Editable Example
Gray
Gray
Gray
Editable Example

With left icon#

Cyan
Cyan
Cyan
Editable Example

With right icon#

Cyan
Teal
Editable Example

With close button#

Cyan
Cyan
Cyan
Editable Example

With custom element#

SA
Segun
Editable Example

Props#

NameTypeDefaultDescription
variantsolid, subtle, outlinesubtleThe variant style of the tag component.
sizesm, md, lglgThe size of the tag component.
variantColorstringgrayThe color scheme of the tag variant.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo