Badge

Overview

• Badges are colored text elements containing a small amount of information

• It is used for labeling content 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 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

• 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 clickng on “x“ which appears on 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 clickng on “x“ which appears on the icon