Overview
Badges are colored text elements containing small bits of information. They are used for labeling content, displaying metadata, and highlighting information.
Steps for configuration:
Go to Component
Search the badge component drag and drop the badge component in the Layout
...
Configurations of a badge component
...
Label: Badge label is used to give the identity for a badge which display on UI
Variant: Users can set various types of variants for the badge which is displayed in different color formats according to their conditions
...
Default: Default is used to display the default color of the badge, such as displayed in white color
Inverse: If the user selects the inverse from the drop-down then the badge will be displayed in grey color
Lightest: If the user selects the lightest from the drop-down then the badge will be displayed in white color
Success: If the user selects the success from the drop-down then the badge will be displayed in green color
Warning: If the user selects the warning from the drop-down then the badge will be displayed in orange color
Error: If the user selects the error from the drop-down then the badge will be displayed in red color
...