[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 ❤️

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