Content Comparison

Overview

• Badges are colored text elements containing a small

...

• amount of information

...

• It is used for labeling content

...

• and highlighting information

...

Steps for configuration:

1. Go to Component

2. 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

...

• 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

  such as

  • , which is displayed in white color

  • Inverse:

  If the user selects the inverse from the drop-down then the badge will be

  • Inverse is a variant of Badge, which is displayed in grey color

  • Lightest:

  If the user selects the lightest from the drop-down then the badge will be

  • Lightest is a variant of Badge, which is displayed in white color

  • Success:

  If the user selects the success from the drop-down then the badge will be

  • Success is a variant of Badge, which is displayed in green color

  • Warning:

  If the user selects the warning from the drop-down then the badge will be

  • Warning is a variant of Badge, which is displayed in orange color

  • Error:

  If the user selects the error from the drop-down then the badge will be

  • 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

...

...