Skip to main content




Applies only to Traditional Web Apps




Display numerical information as notification.

Use the Icon Badge to notify the user of numerical information. It is frequently used to notify users about new messages or tasks.

How to use

Add an icon to the placeholder, then set the color and apply the light theme.

  1. Drag IconBadge pattern into the preview.

  2. Change the pattern values and icon.

  3. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
Number Number that will appear inside the badge over the icon. Integer False 0
Color Color of the badge over the icon. Color Identifier False Entities.Color.Primary
IsLight Use the lightest color version for the background and the darker color version for the text. Boolean False False
ExtendedClass Add custom style classes to this Block. Text False none

Layout and Classes

  • Was this article helpful?