[JS+Editor Module] Bubble Badges 2

[Clooos]

Bubble Badges 2

Version: v2.0.4
Creator: Clooos

Important

Supported cards:

• All

Add dynamic badges to your Bubble Cards that display icons, entity states, or attributes (this v2 finally allows infinite badges on any sub-button). Badges can be placed on the main icon or on sub-buttons, and they support conditional visibility, custom colors, and animations.

What's new in v2.0.0?

This update is a fresh start for the badges system with a new name (bubble_badges) and a much smoother workflow.

• Unlimited badges on the main icon or sub-buttons
• Cleaner YAML with a simpler list based config
• New animations like pulse, bounce, shake, fade, glow
• Smart auto positioning when multiple badges overlap

---

Configuration

bubble_badges:
  badges:
    - name: Home Status
      target: main_icon
      icon: mdi:home
      animation: pulse
      condition:
        - condition: state
          entity_id: person.quentin
          state: home

    - name: Battery Low
      target: main_icon
      entity: sensor.phone_battery
      color: red
      animation: shake
      condition:
        - condition: numeric_state
          entity_id: sensor.phone_battery
          below: 20

    - name: Temperature
      target: sub_button
      sub_button_index: 1
      icon: mdi:thermometer
      entity: sensor.living_room_temperature
      animation: glow

---

🧩 Get this Module

If you like this module and want to support my work, you can find it on my Patreon. Bubble Card keeps growing, and your support helps me spend more time adding new features and fixing bugs ❤️

By joining my Patreon, you also get access to all my other exclusive modules!

A big thank you to everyone already supporting me. Your messages and feedback mean a lot and really push me to keep improving Bubble Card and releasing new features for free for the community. Cheers! 🍻

---

How to install

1. Download the module
   Download the YAML file for this module from the bottom of the Patreon post.

   

2. Open your Bubble Card editor
   Go to the card where you want to use the module.

3. Import the module
   In the Modules section of the editor, click on Import from YAML, paste the contents of the downloaded YAML file, then click Import Module.

4. Configure as needed
   Once imported, you can customize badges, conditions, colors, and animations directly in the editor or in YAML.

---

Screenshot:

[Clooos]

Bubble Badges v2.0.1

• Custom colors are now working with all animations.

Note: The "Attribute" picker issue will be fixed in Bubble Card v3.1.0-beta.5.

[zyi840449]

Can I put Badges on horizontal-buttons-stack card?

[rocktale]

I tried it but in doesn't work in my case. My idea was to show lights and presence as badges on the icons of the individual buttons of the horizontal stack. Is there any was to do this?

[kelbertpaul]

Hi, I'm testing this out. I've managed to add the presence/absence badge, the battery indicator, and the main icons are generally working. However, the subbutton isn't appearing, which I don't understand. I've cleared my cache, and I'm using the latest beta version of BubbleCard, etc

type: custom:bubble-card
card_type: button
button_type: state
entity: person.paul
modules:
  - bubble_badges
bubble_badges:
  badges:
    - name: Home Status
      target: main_icon
      icon: mdi:home
      animation: pulse
      condition:
        - condition: state
          entity_id: person.paul
          state: home
    - name: Battery Low
      target: main_icon
      entity: sensor.pixel_paul_battery_level
      color: red
      animation: shake
      condition:
        - condition: numeric_state
          entity_id: sensor.pixel_paul_battery_level
          below: 20
    - name: Temperature
      target: sub_button
      sub_button_index: 1
      icon: mdi:thermometer
      entity: sensor.zb_thermometre_sonoff_salon_temperature
      animation: glow
show_attribute: false
show_last_updated: false
sub_button:
  main: []
  bottom: []
force_icon: false
show_last_changed: false
grid_options:
  columns: 6
  rows: auto

[Clooos]

Hi! Just wanted to know if your issue is now fixed with v2.0.3?

[kelbertpaul]

I just installed this version, and it's seems like no :

[kelbertpaul]

But don't worry, if it's just an isolated case I can do something else

[Clooos]

I just read your issue again, and I just realized something, you're trying to add a badge to a sub-button that doesn't exist in your configuration (you don't have any on this card), but you maybe figured it out since 🙂

[kelbertpaul]

Ah yes, exactly! I just tried it and it worked, thank you so much!

[Clooos]

Bubble Badges v2.0.2

• Fixed an issue where some state or attributes were not displayed correctly
• State and attributes are now a bit smaller
• The limit of the sub-button index was set to 4 by mistake (even if adding more was working)

The attribute field will finally works for good in Bubble Card v3.1.0-beta.7, this issue was a lot more tricky to fix than I expected!

[Clooos]

Bubble Badges v2.0.3

• Huge performance improvement! The module now significantly reduces CPU usage by running only when needed
• All animations are now GPU accelerated for a smoother experience
• The Shake animation has been updated with a new effect
• The Glow animation has been completely rebuilt to eliminate lag on older devices

[Clooos]

Bubble Badges v2.0.4

• Fixed a z-index issue

[shelly20222]

Hi, just tried this badges today. Why is there the state text displayed (geschlossen = closed), too?

just wanted to see if the window is opened :-)

[Clooos]

Hi! This is because you've provided the entity and the icon, just provide the icon if you don't want to see the state (the entity is already set in your condition).

[shelly20222]

works now as expected - thx for the hint

[marcelomarshmallow]

The value_template condition doesn't seem to be operating correctly.

When running the template in the developer tools, “true” is output, so the template is functioning correctly.
However, the badge is not displayed when the condition is met.

type: custom:bubble-card
card_type: button
button_type: name
sub_button:
  main: []
  bottom: []
name: Test
icon: mdi:alpha-t
modules:
  - bubble_badges
  - home-assistant-default
bubble_badges:
  badges:
    - color: warning
      name: Fenster_Fehler
      target: main_icon
      icon: mdi:window-closed-variant
      condition:
        - condition: template
          value_template: |-
            {{ expand('binary_sensor.fenster_erdgeschoss') 
               | selectattr('state', 'in', ['unavailable', 'unknown']) 
               | list | count > 0 }}

Once the template is deactivated, the badge will be displayed.

Edit
Created bug report #2087

[Clooos]

@Demahom1412 What Bubble Card version have you installed? You need at least v3.1.0 for Jinja templates.

[Demahom1412]

@Clooos Sorry I didn't saw my notifications, i have indeed bubble card 3.1.0, but i'm not using Jinga but classic conditions with area.

[Clooos]

This make sense then, most conditions are supported but not that one (Home Assistant have too many condition types, and I'm doing my best with the time I have 😅), try with a state condition instead 👌

[Demahom1412]

Oh, all good then, thanks you for your time and for your work

[Clooos]

De rien, avec plaisir ! 😄

[Mando89]

Hello,
I'm wondering if there is a way to show the icon of the location you set in the settings of the map of home assistant. Thats why I like the badge of the HA tile card with person.-entity. e.g: "at home" has a house-icon and "at work" has a hammer-icon.
I tried it with the entity-picture atribute but I just got this:

Yes, I could use "conditions" for the badge but thats not worth the effort :D

[Korndaweizen]

I made a patch for this, works well :)
@Clooos maybe this is something you can to the original module as I do not want to leak the code 😉

I Hope posting the git diff here is okay, else I will delete my comment!

Unfortunately I cannot make the toggle invisible if it is not a person entity. Maybe conditional settings may be a thing for future module releases.

Also made a reddit post about this:
https://www.reddit.com/r/BubbleCard/comments/1tcve0u/how_to_add_zone_badges/

git diff --cached -p .\bubble_badges.yaml
diff --git a/bubble_badges.yaml b/bubble_badges.yaml
index 7c4fddc..aada0a6 100644
--- a/bubble_badges.yaml
+++ b/bubble_badges.yaml
@@ -1,7 +1,7 @@
-bubble_badges:
-  name: Bubble Badges 2
-  version: v2.0.4
-  creator: Clooos
+bubble_badges_zone:
+  name: Bubble Badges 2 + Zone Icon Support
+  version: v2.0.4.1
+  creator: Clooos/KDW
   link: https://github.com/Clooos/Bubble-Card/discussions/1984
   description: |
     Add dynamic badges to your Bubble Cards that display icons, entity states, or attributes. Badges can be placed on the main icon or sub-buttons, support conditional visibility, custom colors and animations.
@@ -119,7 +119,8 @@ bubble_badges:
             containers: {},
             watchedEntities: new Set(),
             lastStateSignature: '',
-            groups: null
+            groups: null,
+            usesZoneIconBadges: false
         };

         // One-time setup: Sort badges and identify entities to watch
@@ -129,6 +130,9 @@ bubble_badges:

             badgesConfig.forEach(badge => {
                 if (badge.entity) this._bb_cache.watchedEntities.add(badge.entity);
+                if (badge.use_zone_icon_as_badge && badge.entity?.startsWith('person.')) {
+                    this._bb_cache.usesZoneIconBadges = true;
+                }
                 if (badge.condition) {
                     const str = JSON.stringify(badge.condition);
                     const matches = str.match(/"entity_id"\s*:\s*"([^"]+)"/g);
@@ -153,6 +157,14 @@ bubble_badges:
             if (state) currentSignature += state.last_updated;
         }

+        if (this._bb_cache.usesZoneIconBadges) {
+            Object.values(hass.states)
+              .filter((stateObj) => stateObj.entity_id.startsWith('zone.'))
+              .forEach((zoneState) => {
+                currentSignature += zoneState.last_updated;
+              });
+        }
+
         if (currentSignature === this._bb_cache.lastStateSignature && currentSignature !== '') return;
         this._bb_cache.lastStateSignature = currentSignature || 'static_done';

@@ -162,6 +174,48 @@ bubble_badges:
           sub_button: (index) => `.bubble-sub-button-${index}`,
         };

+        const getPersonZoneIcon = (stateObj) => {
+          const state = stateObj?.state;
+          const entityId = stateObj?.entity_id || 'unknown';
+          const zones = Object.values(hass.states).filter((s) => s.entity_id.startsWith('zone.'));
+          console.debug('[bubble_badges] getPersonZoneIcon: zones found', {
+            entity_id: entityId,
+            person_state: state,
+            zones: zones.map((z) => ({
+              entity_id: z.entity_id,
+              name: z.attributes?.friendly_name,
+              icon: z.attributes?.icon,
+            })),
+          });
+
+          if (state === 'unknown') {
+            return 'mdi:help';
+          } else if (state === 'not_home') {
+            return 'mdi:home-export-outline';
+          } else if (state === 'home') {
+            return 'mdi:home';
+          }
+
+          const zone = zones.find((z) => state === z.attributes?.friendly_name);
+          if (zone?.attributes?.icon) {
+            console.debug('[bubble_badges] getPersonZoneIcon: matched zone icon', {
+              entity_id: entityId,
+              person_state: state,
+              zone_entity_id: zone.entity_id,
+              zone_name: zone.attributes?.friendly_name,
+              icon: zone.attributes.icon,
+            });
+            return zone.attributes.icon;
+          }
+
+          console.debug('[bubble_badges] getPersonZoneIcon: fallback icon', {
+            entity_id: entityId,
+            person_state: state,
+            reason: 'no matching zone icon found',
+          });
+          return 'mdi:crosshairs-question';
+        };
+
         const renderBadgeGroup = (containerSelector, badgeList) => {
           let container = this._bb_cache.containers[containerSelector];
           if (!container || !container.isConnected) {
@@ -188,10 +242,16 @@ bubble_badges:
                 if (badgeConfig.entity) {
                     const stateObj = hass.states[badgeConfig.entity];
                     if (stateObj) {
-                        hasText = true;
-                        generatedHtml += badgeConfig.attribute
-                            ? hass.formatEntityAttributeValue?.(stateObj, badgeConfig.attribute)
-                            : hass.formatEntityState?.(stateObj);
+                        const isPersonEntity = badgeConfig.entity.startsWith('person.');
+                        const useZoneIcon = !!badgeConfig.use_zone_icon_as_badge && isPersonEntity;
+                        if (useZoneIcon) {
+                            generatedHtml = `<ha-icon icon="${getPersonZoneIcon(stateObj)}"></ha-icon>`;
+                        } else {
+                            hasText = true;
+                            generatedHtml += badgeConfig.attribute
+                                ? hass.formatEntityAttributeValue?.(stateObj, badgeConfig.attribute)
+                                : hass.formatEntityState?.(stateObj);
+                        }
                     }
                 }
                 if (badgeConfig.color) styles.color = `var(--${badgeConfig.color}-color)`;
@@ -299,6 +359,10 @@ bubble_badges:
               label: Entity (optional - display icon, entity, or both)
               selector:
                 entity: {}
+            use_zone_icon_as_badge:
+              label: Use Zone Icon as Badge (person entities only)
+              selector:
+                boolean: {}
             attribute:
               label: Attribute (optional - only used if entity is set)
               selector:
(END)

[Clooos]

Hi! Thank you so much for sharing this, I will definitely update it with your changes 😄

[Korndaweizen]

Hi there! Did you find the time to update this yet @Clooos? :)

[UnleashedMors]

Hello Clooos,
when i tried to use the badges they are cut down around the subbutton corner.

https://pastebin.com/zDQYWgLi

Edit
See bug report #2138

[Clooos]

Hi! This issue is now fixed in v3.1.4, can you confirm this? 🙂

[DesertRec]

@Clooos how to get badges on "Bottom sub buttons"?

[Clooos]

Hi! Sorry for the late answer, bottom sub-buttons are following the same index, so if you have 2 main sub-buttons, the first bottom sub-button will be the third (so use 3 for the index).

[DerHerzog7]

The badge, if the icon is right aligned, overlaps the edge of the bubble card. Is there a way to specify the badge position?

[Clooos]

Hi! I'm not sure, but this issue should be now fixed in v3.1.4, can you confirm this? I will maybe add badge position at some point as well 👌

[Schmu1605]

is it possible to change the text and icon color on the badge ?

[CaptainUns]

Anyone ever figure this out? Would be great to be able to force a specific text/icon color on the badge.

[nagtegaal]

Is this functionality of the "bubble badges 2" broken or not?
It is the only reason why I would like to eto subscribe to the Patreon page... Or not... ;-)

[Clooos]

Hi! This module is still fully working, I'm using it on my own dashboard 👌

[Denzil-07]

Hi Clooos,

Again thanks for all your doing for this community and the great work on bubble card.

I may be missing something though i cannot seem to get bubble badges 2 to display badges on sub buttons within a bubble calendar card, and gather this is supported?

Any help would be greatly appreciated.

Thanks

[Clooos]

Hi! I just tried and you're right, I will check that when I have more time (I'm currently focus on v3.2.0 and my brain is melting a bit these days 🫠).

[DerHerzog7]

Hi! I just tried and you're right, I will check that when I have more time (I'm currently focus on v3.2.0 and my brain is melting a bit these days 🫠).

...and the modules you haven't released right? 🤞

[Clooos]

Yes definitely 😁

[Denzil-07]

No worries, thanks 🙂

[DerHerzog7]

Yes definitely 😁

Phew!

[hurrama]

Hello, thx for you work, you can say how that fixed?) Bubble cards 3.2.5

[spookyneo]

Hi @Clooos,

With the new 3.3.0-beta3, I have an issue with the Bubble Badges 2 and the new HA conditions ("light is on", "moisture detected", etc). These new conditions were not previously working in Bubble Card, but you got it fixed with #2540.

I have found that using these new conditions seems to require a refresh of the dashboard in order for the badges to appear, at least for Bubble Badges 2 module. I am using the module to display a badge if any lights are on in an area. If the condition is met for the area, then the badge will NOT display in the dashboard. I must refresh the dashboard for the badge to appear. Same goes if the conditions are unmet; I must refresh the dashboard for the badges to disappear. However, if I use conditions with the entity instead of the new HA conditions, then the badge will display right away without the need of refresh.

I have no other modules enabled on the Bubble Card that I am using with Bubble Badges 2.

I am using Bubble Badges 2.0.4.

Thank you for your hard work sir :)

[Clooos]

Hi! I will check that for the next update, thank you for the feedback!

[gmlsxhfl]

Hi, I'm using bubble badge v2.0.4, and there's some small issue in bubble badge. Can u take a look at this? (in the up right corner)

[System Info]
Installation method : Home Assistant OS
Core : 2026.9.1
Supervisor : 2026.08.0
Operating System : 18.2
Frontend : 20260826.6

[YAML]
type: custom:bubble-card
card_type: button
button_type: name
name: 식탁
sub_button:
main:
- name: Automatically grouped
buttons_layout: inline
group:
- entity: light.living_room_light5
icon: phu:ensis
light_background: false
tap_action:
action: toggle
state_background: false
- entity: switch.sihas_inner_sw1_l3
state_background: false
icon: phu:ceiling-devere
tap_action:
action: toggle
bottom: []
main_layout: inline
grid_options:
columns: 6
show_icon: false
button_action:
tap_action:
action: navigate
navigation_path: '#dining_table_light_popup'
modules:

• my_module_2
• bubble_badges
  bubble_badges:
  badges:
  • target: sub_button
    sub_button_index: 2
    icon: phu:zigbee2mqtt
    color: orange
    entity: number.samsung_air_purifier_avt_ww_tp1_23_axx500_ai_purify_interval
    card_layout: large

[Clooos]

Hi! Have you updated Bubble Card to v3.3.0?

[gmlsxhfl]

Yes, I'm currently using Bubble Card v3.3.0.

[Clooos]

Indeed I tried and I have the same result as you. I remember why I've made this choice and I can't really fix this without changing or breaking a lot of other things.

The only option would be to give the user the choice, in the meantime you can just add this to your custom styles:

.bubble-container {
  overflow: visible;
}

This will not break anything in your case, the problem I mention above only happens on cards with more sub-buttons and on smaller screens where the sub-buttons will go out of your card, like this: