Badge

Badge component is used to render a badge in the user interface this can be used as a status indicator

Usage#

Trial

Success

Danger

Warning

Information

Default

Code#

<Badge label="Trial" color="purple" />
<Badge label="Success" color="green" />
<Badge label="Danger" color="red" />
<Badge label="Warning" color="yellow" />
<Badge label="Information" color="blue" />
<Badge label="Default" color="default" />

When to use#

These badges are indicators they denote the status of somenthing, here are some examples on when to use them.

Trial

- Trial, new, help

Success

- Success, completed, resolved

Danger

- Danger, rejected, issue

Warning

- Warning, alert, attention

Information

- Information, note, tip

Default

- Beta, default, disabled

API#

Prop	Type	Possible values	Default Value
color	`string`	`"green"`, `"red"`, `"blue"`, `"yellow"`, `"purple"` and `"default"`	`default`
label	`string`	Any string	`""`
showClose	`boolean`	`true` and `false`	`false`
onClose	`()=>void`	-	-

Built by Akshay 🤙