Tag - Keep React

The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction.

Table of Contents#

Default Tag
Colors of Tag
Left Side Icon Tag
Tag With Both Side Icon
Tag With Dashed Border
API Reference

Default Tag#

The Default Tag component represents a tag without any additional elements. It serves as a fundamental building block for various tag variations.

Default Tag

Colors of Tag#

Customize the appearance of your tags by choosing from a range of color options. The "Colors of Tag" component showcases the available color variants.

Gray Tag

Error Tag

Info Tag

Success Tag

Warning Tag

Teal Tag

Purple Tag

Disabled Tag

Left Side Icon Tag#

Enhance your tags by adding an icon to the left side using the leftIcon props.

Tag

Tag With Both Side Icon#

Create tags with icons on both sides. The left side can accommodate a custom icon, while the right side features a dismiss icon for easy removal.

Tag

Tag With Dashed Border#

The "Tag With Dashed Border" example demonstrates two types of border styles for tags: borderType="solid" and borderType="dashed".

Tag

API Reference#

For a comprehensive overview of the Tag component's properties, refer to the API documentation.

Property	Description	Type	Default
leftIcon	Icon component displayed on the left side of the tag.	ReactNode	<CrownSimple/>
dismissIcon	Icon component used for dismissing the tag.	ReactNode	<X/>
dismiss	Determines if the tag can be dismissed.	Boolean	false
disabled	Disables interactions with the tag.	Boolean	false
color	Specifies the color variant of the tag.	error gray info success warning teal purple	gray
borderType	Sets the type of border for the tag.	solid dashed	solid
onDismiss	Callback function when the tag is dismissed.	boolean \| (() => void)	Function