Component <Tag />

Props

Props	Type	Meaning	Possible values
size	string / object	Change badge size	{ default: sm / md / lg, smRes: sm / md / lg, mdRes: sm / md / lg, lgRes: sm / md / lg } / sm / md / lg
weight	string	Change text font weight	light / normal / semibold / bold
shape	string	Change badge shape	rounded / squared
color	string	Change badge background color	red / green / grey / white
icon	string	Add icont before the text	Any icon name
onClick	function / null	Action, after x-mark was clicked	() => {...} / null

---

Sizes

Examples:

<Tag size="sm">Easy</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Hard</Tag>
<Tag size={{ default: 'sm', smRes: 'sm', mdRes: 'md', lgRes: 'lg' }}>Responsive</Tag>

Easy

Medium

Hard

Responsive

---

Weight

Examples:

<Tag weight="light">Some text</Tag>
<Tag weight="normal">Some text</Tag>
<Tag weight="semibold">Some text</Tag>
<Tag weight="bold">Some text</Tag>

Some text

Some text

Some text

Some text

---

Shapes

Examples:

<Tag shape="squared">Lorme</Tag>
<Tag shape="rounded">ipsum</Tag>

Lorme

ipsum

---

Colors

Examples:

<Tag color="red">Red</Tag>
<Tag color="green">Green</Tag>
<Tag color="grey">Grey</Tag>
<Tag color="white">White</Tag>

Red

Green

Grey

White

---

With icon

Examples:

<Tag>Text</Tag>
<Tag icon="icon-blick">Text</Tag>

Text

Text

---

With action

Examples:

<Tag color="green" onClick={() => alert('Good job!')}>Click me</Tag>
<Tag color="red" onClick={() => alert('Good job!')}>And me</Tag>

Click me

And me