Overview
Badges are colored text elements containing a small bits amount of information
It is used for labeling content , displaying metadata, and highlighting information
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 given to the badgeGenerally, the label is displayed on the badge
...
Variant
...
Allows you to show badge in different color
...
format
The
badgeBadge comes in a
fivesix variants
Default: Default is used to display the default color of the badge, which is displayed in white color
Inverse:
Shows badgeInverse is a variant of Badge, which is displayed in grey color
Lightest:
Shows badgeLightest is a variant of Badge, which is displayed in white color
Success:
Shows badgeSuccess is a variant of Badge, which is displayed in green color
Warning:
Shows badgeWarning is a variant of Badge, which is displayed in orange color
Error:
Shows badgeError is a variant of Badge, which is displayed in red color
...
...
Left Icon
...
Left Icon: This is an icon selector using which we you can select the icon we you want to be displayed on the left side of the badge
...
No Right Icon: If the checkbox is true, then the right icon is not displayed
...
Right Icon: 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 we you can select the icon we you want to be displayed on the right side of the badge
...
Badge Label
You can also remove the icon by clicking on the cross icon which is visible on the right side of the icon
...
| Include Page | ||||
|---|---|---|---|---|
|
...