Tag

Basic

Sizes

• Tag supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Styles

Variants

• Tag supports 2 variants light and bold and can be changed by passing the variant prop.
• Default variant is light.

Color

• Tag supports 9 colors neutral, primary, secondary, blue, green, orange, red, purple and royal and can be changed by passing the color prop.
• Default color is neutral.

Interactive

• Interactive Tag can be enabled by setting interactive prop to true.

Deletable

• The close icon will be shown in the tag’s right side by setting deletable prop to true.

Selected

• Selected state can be enabled by setting selected prop to true.

Disabled

• Disabled State can be enabled by setting disabled prop to true.

Multiline

• When a tag’s label is too long, the tag will truncate the text and show ellipsis.
• By setting multiline prop to true, the tag will show the full text in multiple lines.