IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

Badge

Preview

Show code

<Badge
  title="7"
  shape="square"
  size="medium"
  color="primary"
  showOutline={false}
  hidden={false}
>
  <Avatar
    src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
    name="Jane"
    radius="small"
  />
</Badge>

Docs

Name	Description	Default	Control
title *	Badge label	-
shape	Shape of Badge	"square"	square circle
size	Size of Badge	"medium"	small medium large
color	Color of Badge	"primary"	primary secondary success danger warning info light dark
showOutline	Whether display outline	false	falsetrue
hidden	Hide Badge label	false	falsetrue
children *	Badge children element	-	-
className	Wrapper class name	-	-
labelClassName	Text label class name	-	-

IT Tools

Tools

UI Components

Badge

Preview

Docs