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 Badge to notify the user about numerical information such as new messages or tasks.

    How to use

    Use the parameters to choose some options such as color, shape, size and light theme.

    1. Drag Badge pattern into the preview.

    2. Set the Input Parameters to extend the default values.

    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    Number Number that will appear inside the badge. Integer False 8
    Color Set the color. Color Identifier False Entities.Color.Primary
    Shape Set the shape. Shape Identifier False Entities.Shape.Rounded
    Size Set the size. Size Identifier False none
    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

    Advanced Use Case

    Use a transparent Badge Pattern with a border

    1. Use Transparent in Color Value.

    2. In the ExtendedClass Input Parameter, choose the desired text color.

    3. Choose the border size of the Badge.

    4. Publish and test.


    If the number on Badge pattern is greater then 99, it is displayed as 99+.

    • Was this article helpful?