Skip to main content




Applies only to Traditional Web Apps




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?