Overview
Badges are colored text elements containing a small
...
amount of information
...
It is used for labeling content and highlighting 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 a five variants
Default:
Inverse: Inverse is used when you need higher contrast than our default badge
A Badge can be used to display unread notifications or to label a block of text
Badges do not work for navigation because they can not include a hyperlink
...
Attributes
Label
The label is a short description displayed on the badge
...
Variant
Allows you to show badge in different color format
The Badge comes in a six variants
Default: Default is used to display the default color of the badge, which is displayed in white color
Inverse: Inverse is a variant of Badge, which is displayed in grey color
Lightest:
Lightest is a variant of Badge, which is displayed in white color
Success: Success is
a variant of Badge, which is displayed in green color
Warning: Warning is
a variant of Badge, which is displayed in orange color
Error: Error is
a variant of Badge, which is displayed in red color
...
...
Left Icon
...
Left Icon: Display the icon on the left side of the badge
...
No Right Icon: If the checkbox is true, then the right icon is disabled
...
...
This is an icon selector using which you can select the icon you want to be displayed on the left side of the Badge Label
You can also remove the icon by clicking on the cross icon which is visible on the right side of the icon
...
Right Icon
This is an icon selector using which you can select the icon you want to be displayed on the right side of the Badge Label
You can also remove the icon by clicking on the cross icon which is visible on the right side of the badge icon
...
| Include Page | ||||
|---|---|---|---|---|
|
...