Tag
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
Color and Size Variation
Code
Tag Variant Options
Code
Left Icon
Code
Right Icon
Code
Close Button
Code
Adding a Custom Element
Code
Did you know?
Creative Idea No. 1
Code
Creative Idea No. 2
Code
Creative Idea No. 3
This is the detail of Feature 1.
Code
copyright © 2023 IHeartComponents | evanmarie.com
created with love by the I♥️Components team using
Special thanks to Stefan Bohacek / Generative Placeholders.