Chakra-UI

I♥️Components

Tag

|

Chakra Docs

|

⦾ Tags are one of the most versatile and useful components offered by Chakra UI. The Tag component is designed to effectively label, categorize, or organize items using descriptive keywords, creating a more navigable user interface.

The Tag component utilizes the following Chakra components:

  • Tag: This acts as the wrapper for all the tag elements.
  • TagLabel: This component provides the text content for the tag.
  • TagLeftIcon: This is the icon placed on the left side of the tag.
  • TagRightIcon: This is the icon placed on the right side of the tag.
  • TagCloseButton: This gives the tag a close button.

These components can be imported as follows:

Examples

Tag Basics

⦾ The most straightforward way to use the Tag component is by simply wrapping the text with Tag tags.
Premium Content

Color and Size Variation

⦾ The Tag component also provides flexibility in size and color. For instance, let's create three tags with different sizes and a consistent color scheme. This will produce small, medium, and large tags, all with a solid color scheme.
Small PurpleMedium CyanLarge Pink

Code

Tag Variant Options

⦾ The default variant style is "subtle", but there are two others to choose from: "solid" and "outline". Below you can see the differences between the three.
Subtle VariantSolid VariantOutline Variant

Code

Left Icon

⦾ You can easily incorporate an icon on the left side of the tag by using the TagLeftIcon. This is very convenient, as the icon is automatically spaced well within the tag. The following example shows the three different sizes of tags each with a left SunIcon.
SunshineSunshineSunshine

Code

Right Icon

⦾ To create a similar component but with the icon on the right side, all we need do is use the TagRightIcon.
LinkLinkLink

Code

Close Button

⦾ To make a tag dismissable, all you need do is add a TagCloseButton. The example below has three closable buttons. If you want to keep closing them, you can reset them and make them reappear!
Close me!Close me!Close me!

Code

Adding a Custom Element

⦾ You can customize your tags even further by adding unique elements like an avatar.
Jasper Jenkins

Code

Did you know?

Creative Idea No. 1

Tags as Progress Indicators: Tags can be used as progress indicators in your application. Consider a situation where you have a multi-step form or process; tags can visually represent which step the user is currently on.
Step 1Step 2Step 3Step 4

Code

Creative Idea No. 2

Tags as Interactive Filters: Tags can also be used as interactive filters. For example, on a blog, you could use tags to allow users to filter posts by topic.
JavaScriptReactChakra UIOpenAI

Code

Creative Idea No. 3

Product Feature Tags: In this example, we'll implement a list of product features that are toggled via tags. When a tag is clicked, a corresponding feature detail card will be displayed. This can be very useful in product pages where you want to highlight different features and provide additional information when the user is interested.
Feature 1Feature 2Feature 3Feature 4

Feature 1

This is the detail of Feature 1.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.