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 highlight, emphasize, or quickly convey specific information. It is most often 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.
To get started, create the table on the screen from the Tables section in the Data Sources module. Then select New SQL Action. Test and save it. First, add your action to your page using the Initial Action. Next, drag the “Badge” element onto your screen, add an “Icon” element inside it, and set it to a notification icon. Open the Symbol Picker in the Count field. Define your settings. Configure the Show Zero, Max, and Dot settings for visual behavior. Select an icon. Select the column and align it to the right using the Properties panel.
When the app is tested, the user will see a Badge in the corner of the message icon showing 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” value.
