Code

API

You can import the interfaces that are used for the onRemove and onChange.This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
children	ReactNode	✅
value	string	❌
isRemovable	boolean	❌
isSelectable	boolean	❌
characterLimit	number	❌
tooltipPosition	'top' | 'bottom' | 'right' | 'left';	❌
checked	boolean	❌
defaultChecked	boolean	❌
onRemove	(e: TagRemoveEventProps) => void;	❌
onChange	(e: TagChangeEventProps) => void; }	❌

children

The children can be a string, an HTML element or even a Tag.Avatar without the need to install the Avatar component as a dependency.

value

Used to have a controlled way of using the Tag component.

isRemovable and isSelectable

Capability of removing and selecting the Tag.

characterLimit

The character limit used to constrain the string passed as child. If the string passed surpassed the characterLimit value,a tooltip is rendered. The default value is 15.

checked

Use when having a controlled state of the tags.

defaultChecked

Use to change the checked state in an uncontrolled way.

onRemove and onChange

The methods that are triggered when the Tag is removed/state changes.

Example

Live Demo

Code Sandbox