Component <Badge />

Props

Props	Type	Meaning	Possible values
size	string	Change badge size	sm / md
shape	string	Change badge shape	rounded / squared
color	string	Change badge background color	primary / green / yellow / blue / turquoise / grey
close	boolean	Enable/disable access to the action on close	true / false
handleClose	function	Action, after x-mark was clicked	() => {...}

---

Sizes

Examples:

<Badge size="sm">Lorme</Badge>
<Badge size="md">ipsum</Badge>

Lorme

ipsum

---

Shapes

Examples:

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

Lorme

ipsum

---

Colors

Examples:

<Badge color="primary">Primary</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="turquoise">Turquoise</Badge>
<Badge color="grey">Grey</Badge>

Primary

Green

Yellow

Blue

Turquoise

Grey

---

With action x-mark

<Badge close handleClose={() => {}}>Lorme</Badge>
<Badge close handleClose={() => {}}>ipsum</Badge>
<Badge close handleClose={() => {}}>Text</Badge>

Lorme

ipsum

text