Examples

Basic

Example Tag

Status

Two status available: "default" and "semi-transparent"

Default

Semi-Transparent

Colors

Eezee Yellow

Background

Danger

Success

Warning

Purple

Turquoise

Magenta

Eezee Blue

Prefix and Suffix Element

A Custom Element can also be placed on the left and/or right position of the tag

Prefix Element

Suffix Element

Prefix and Suffix Element

Max Width

A max width can be defined for overflow support

Very long text super super long

Actions

Tag can be clickable and/or removable

Click Me!

Remove Me!

Click or Remove Me!

Props

Property	Type	Description	Required	Default
backgroundColor	eezee-yellow-light background danger-light success-light warning-light purple-light turquoise-light magenta-light eezee-blue-light	-	T	-
children	React.ReactNode	Use-case: Allows regular and bold texts at the same time	T	-
prefixElement	string	Use-case: Can be an Icon, Custom Text Font or JSX.Element	F	undefined
suffixElement	React.ReactNode	Use-case: Can be Badge or JSX.Element	F	undefined
maxWidth	number	Text overflow support for dynamic content	F	undefined
isRemovable	boolean	To display the removable button (cross icon) at the tail	F	false
appearance	default semi-transparent	-	F	default
onClick	() => void	Click on tag's content	F	undefined
onRemove	() => void	Click on tag's removable button (cross icon)	F	undefined
onMouseEnter	() => void	Mouse hovers into component	F	undefined
onMouseLeave	() => void	Mouse leaves from component	F	undefined

Guidelines