Content Comparison

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 buttonGenerally, the label is displayed on the buttonbadge

...

Variant

...

Allows you to show badge in different color

...

format

• The

  badge

  Badge comes in a

  five

  six variants

  • Default: Default is used to display the default color of the badge, which is displayed in white color

  • Inverse:

    Shows badge

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

  • Lightest:

    Shows badge

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

  • Success:

    Shows badge

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

  • Warning:

    Shows badge

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

  • Error:

    Shows badge

    Error 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

...

...