Badges are colored text elements containing small bits of information. They are used for labeling content information.
Configurations of a Badge component
...
Label: To display on UI
Variant: Users can set various types of variants for text content which are displayed in different color formats.
The badge comes in
...
Default
...
Inverse
...
Lightest
...
Success
...
Warning
...
a five variants
Default:
Inverse: Inverse is used when you need higher contrast than our default badge which is displayed in grey color
Lightest: This badge is used when you need higher contrast, such as on colored backgrounds.
Success: Success is used to communicate success which is displayed in green color
Warning: Warning is used to communicate warning which is displayed in orange color
Error: Error is used to communicate an error which is displayed in red color
...
No Left Icon: If the checkbox is true, then the left icon is disabled
...