1. Add the Native Badge & Status Pro element to your Bubble mobile page.
2. Choose a Variant:
Notification badge for small unread count badges.
Presence dot for online/offline/busy/away user status.
Count bubble for a larger metric chip with a count and label.
Status pill for success/error/warning/info style labels.
Priority tag for urgency or priority labels.
Flag label for a stronger highlighted label style.

3.Set Status / color to control the badge color and default label.
Examples:
Success
Error
Warning
Info
Online
Offline
Busy
Urgent
High
Medium
Low
Paid
Pending
Failed
Shipped

4. Set Label if you want custom text.
If left empty, the plugin uses a default label based on the selected status.

5. For count-based variants, set:
Count
Max count
Min count
Count prefix
Count suffix
Overflow style
Use Show zero if a notification badge should still appear when the count is 0.
Use Hide when zero if the badge should disappear when the count is 0.

6. To show an icon:
Set Show icon to yes.
Enter a symbol or short text in Icon text.
Choose Icon position as Left or Right.
Example icon text values:
✓
!
★
+
New
VIP

7. Choose an animation:
None for no animation.
Pulse for presence/status attention.
Ring for a soft expanding ring.
Pop for a small pop effect when values update.

8. Customize the layout:
Size
Height
Min width
Horizontal padding
Border radius
Font size
Dot size

9. Customize colors to match your app:
Success color
Error color
Warning color
Info color
Neutral color
Online color
Offline color
Busy color
Away color
Background color
Surface color
Text color
Soft text color
Border color

10. Workflow Actions
Use these actions to control the badge dynamically:

Set label
Changes the badge label text.

Set count
Sets the badge count directly.

Increment count
Adds to the current count.

Decrement count
Subtracts from the current count without going below the minimum count.

Reset count
Resets the count to the minimum count.

Set status
Changes the semantic status/color.

Show badge
Makes the badge visible.

Hide badge
Hides the badge.

Toggle visibility
Switches between visible and hidden.

Flash badge
Triggers the pop animation.

11. Published States
You can use these states in Bubble workflows, conditions, or text elements:

is_visible
Whether the badge is currently visible.

current_label
The resolved label before final display formatting.

display_text
The exact text displayed on the badge.

current_count
The normalized current count.

current_status
The resolved semantic status.

active_color
The final active color used by the badge.

is_over_max
Yes when the count is higher than Max count.

is_zero
Yes when the count is zero.

variant
The currently resolved badge variant.

press_count
Number of times the badge has been pressed.

last_error_message
Runtime or validation error message.

12. Events
You can trigger workflows from these events:

pressed
Fires when the badge is tapped.

shown
Fires when the badge becomes visible.

hidden
Fires when the badge becomes hidden.

*Example Setup*
For an unread messages badge:
Variant: Notification badge
Count: Current User's unread_messages_count
Max count: 99
Show zero: no
Hide when zero: yes
Status / color: Error

For a user online status:
Variant: Presence dot
Status / color: Online
Label: Online
Animation: Pulse

For an order status:
Variant: Status pill
Status / color: Shipped
Label: Shipped
Show dot: yes

For a task priority:
Variant: Priority tag
Status / color: High
Label: High Priority
Show icon: yes
Icon text: !