Skip to main content




Applies only to Traditional Web Apps




  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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?