Badge elements are used to convey information—such as the number of unread messages, notifications, or status updates—to the user quickly and in an eye-catching way by adding a small label to an icon or component.
A badge is a small, eye-catching label element used in the user interface to emphasize, highlight, or quickly convey specific information. It is most commonly used to display a number, status information, a warning, or a notification indicator. Badges prevent users from missing important information in the app and make interactive areas more visible.
First, add your action to the page using Initial Action. Then, drag a “Badge” element onto the screen, add an “Icon” element inside it, and set it to a notification icon. Open the Symbol Picker in the Count field. Configure your settings. Set the Show Zero, Max, and Dot options for visual behavior.
When the app is tested, the user will see a Badge in the corner of the message icon displaying the number of unread messages. If there are no unread messages—that is, if “Show Zero” is turned off—the Badge will not appear. High message counts are displayed as “99+” thanks to the “Max” setting.
