⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

[aaa39 (Ant39)]

First: thanks for the incredible bubble cards!
I have a problem. When I enter HA in the phone app or through the web interface(browser chrome), all the bubble buttons blink slightly, as if constantly updating. And there is no way to press a button, thereby turning something on or off. It does not matter whether it is: media, a robot vacuum cleaner or just a button. What should I do? Please help.
error in the log

• Uncaught error from Chrome 134.0.0.0 on macOS 10.15.7 Error: Error in generating button custom templates: Cannot read properties of undefined (reading ‘state’) /hacsfiles/Bubble-Card/bubble-card.js:2:59972 Y (/hacsfiles/Bubble-Card/bubble-card.js:2:60104) gt.updateBubbleCard (/hacsfiles/Bubble-Card/bubble-card.js:1445:828) gt.connectedCallback (/hacsfiles/Bubble-Card/bubble-card.js:1445:127) apply (src/scoped-custom-element-registry.js:248:41) P.__insert (/local/banner-card.js:68:1785) P.__commitNode (/local/banner-card.js:68:1865) P.commit (/local/banner-card.js:68:1647) _.update (/local/banner-card.js:42:213) P.__commitTemplateResult (/local/banner-card.js:68:2235)
• Uncaught error from Chrome 134.0.0.0 on macOS 10.15.7 Error: Error in generating button custom templates: Cannot read properties of undefined (reading ‘state’) /hacsfiles/Bubble-Card/bubble-card.js:2:59972 Y (/hacsfiles/Bubble-Card/bubble-card.js:2:60104) gt.updateBubbleCard (/hacsfiles/Bubble-Card/bubble-card.js:1445:828) gt.connectedCallback (/hacsfiles/Bubble-Card/bubble-card.js:1445:127) apply (src/scoped-custom-element-registry.js:248:41) X.render (/local/banner-card.js:159:2297) at.update (/local/banner-card.js:159:1433) at.performUpdate (/local/banner-card.js:134:6643) at._enqueueUpdate (/local/banner-card.js:134:6295)

[GeorgeCastanza]

How would I change the following to be the 3rd sub button. It works for the first.

I’ve tried -2, [2] and any number of other options. What is the format of number in bold

.bubble-sub-button-name-containernumber{
flex-wrap: wrap !important;
}
${card.querySelector(‘.bubble-sub-button-name-containernumber’).innerHTML = ‘&nbsp’ + hass.states[‘sensor.beer_fridge_temp_avg’].state
}

I’m trying to achieve this, with the 3rd sub button.

[robertklep]

From what I can see, the selector needs to be:

.bubble-sub-button-3 .bubble-sub-button-name-container

(at least for the innerHTML part)

[GeorgeCastanza]

Thanks. I had an error elsewhere too. This is the correct code:

${card.querySelector('.bubble-sub-button-3 .bubble-sub-button-name-container').innerHTML = (hass.states['switch.psx3_beer_fridge'].state === 'on' ? 'On' : 'Off') + ': ' + hass.states['sensor.temp_beer_fridge_avg'].state + '°' }

[Spurious]

Are there dashboards “ready to use” with bubble card? I love it but I don’t really wanna start from scratch.

[benm7 (Ben M)]

Has anyone been able to create a bubble card with a historical graph in the background? Terrible mock up below

[derekmarch]

I did a hard cache reset on all my devices and that got it working again, yeah.

[Cedynamix (Cedrick)]

Do you want something like that?

[Quokka1979 (Timmy)]

That looks very slick.
Mind sharing the code

[mark007 (Mark Kennedy)]

With the latest beta7, I notice this in my chrome console. Does anyone know if its an issue with the way I have setup bubble card or something in the code itself that could be fixed.

GET https://:8123/local/bubble/bubble-modules.yaml?v=1741969541283 404 (Not Found) bubble-card.js?hacstag=6801129192507:2

[benm7 (Ben M)]

Exactly that if you can share the coarse that would be amazing!

[luigui2906]

I found this on another post and adapted and customized to my dashboard, it is not bubble card but stack of different cards together. Hope it is useful

type: custom:button-card
aspect_ratio: 10/1.5
grid_options:
  columns: 6
  rows: 1
custom_fields:
  value:
    card:
      type: custom:button-card
      entity: sensor.temperature_sensor_main_bedroom_temperature
      show_icon: false
      show_state: true
      show_name: true
      name: Temperature
      styles:
        name:
          - position: absolute
          - left: "-7px"
          - top: 31px
          - padding-left: 65px
          - justify-self: start
          - font-size: 0.28cm
          - font-weight: bold
          - color: rgba(200,58,92,0.7)
        state:
          - position: absolute
          - left: "-9px"
          - top: 11px
          - padding-left: 67px
          - justify-self: start
          - font-size: 0.45cm
          - font-weight: bold
        card:
          - background: >-
              linear-gradient(90deg, rgba(66, 61, 76,1.0) 0%, rgba(66, 61,
              76,0.0) 100%)
          - width: 160px
          - height: 64px
          - border: none
          - z-index: 1
      tap_action:
        action: none
      hold_action:
        action: none
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.temperature_sensor_main_bedroom_temperature
          color: rgba(220,58,92,1.0)
      hours_to_show: 24
      hour24: true
      points_per_hour: 1
      animate: true
      update_interval: 30
      aggregate_func: avg
      line_width: 3
      bar_spacing: 5
      height: 141
      group: true
      show:
        labels: false
        fill: fade
        state: false
        name: false
        icon: false
  icon:
    card:
      type: custom:button-card
      size: 55%
      icon: mdi:thermometer
      show_name: false
      styles:
        icon:
          - position: absolute
          - left: 9px
          - top: 8.5px
          - color: rgba(200,200,200,1.0)
          - width: 22px
          - height: 22px
          - color: rgba(155,155,155,1.0)
        card:
          - position: absolute
          - left: 2px
          - top: "-2px"
          - border: none
          - border-radius: 50%
          - background-color: rgba(40,40,40,1.0)
          - width: 40px
          - height: 40px
          - z-index: 1
      tap_action:
        action: none
      hold_action:
        action: none
styles:
  card:
    - background-color: rgba(0, 0, 0, 0.0)
    - border: none
    - width: 214px
    - height: 56px
  custom_fields:
    graph:
      - position: absolute
      - left: "-1px"
      - top: "-1px"
      - width: 50
    icon:
      - position: absolute
      - left: 3%
      - top: 18%
    value:
      - position: absolute
      - left: 0%
      - top: 0%
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card {
       border-radius: 38px;
    }

For the card preview:

[edi023 (edwin)]

Really nice work. hope they can implement something like this into bubble card.
Playing a bit with this card to see if I can use this in the meantime

[hassuser95]

Hi, I’m trying to set a limit to the slider to 1.
anyone of you know how to do this?

thank you

[Cedynamix (Cedrick)]

To achieve this effect I used 2 cards.

a first card with the graph on which I apply an offset so that it is at the same level as the bubble card.

Here is the code of the graph (it’s a declutturing Card)

  header_temperature_graph_bubble:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: '[[entity]]'
      color_thresholds:
        - value: 14
          color: '#CCE5FF'
        - value: 16
          color: '#66B2FF'
        - value: 18
          color: '#0080FF'
        - value: 20
          color: '#87c087'
        - value: 22
          color: '#389638'
        - value: 24
          color: '#FF9932'
        - value: 26
          color: '#FF8000'
        - value: 30
          color: '#ff0000'
      hours_to_show: 24
      hour24: true
      animate: true
      update_interval: 30
      aggregate_func: avg
      line_width: 1
      bar_spacing: 10
      height: 42
      group: true
      show:
        labels: false
        fill: true
        state: false
        name: false
        icon: false
      card_mod:
        style: |
          ha-card {
            height: 84px;
            position: absolute;
            box-shadow: none;
            background: none;
            border-radius: 40px;
            border-color: black;
            opacity: 1;
            margin-bottom: -65px;
            margin-left: 0em;
            margin-right: 0em;
          }

and the bubble card configuration that follows

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.wind_card
name: Vent
scrolling_effect: false
show_attribute: true
card_layout: large-2-rows
sub_button:
  - entity: sensor.vent_vitesse_du_vent
    show_background: false
    show_state: true
    icon: mdi:weather-windy
    tap_action:
      browser_mod:
        service: browser_mod.popup
        data:
          size: normal
          style: "--popup-border-radius: 10px"
          content:
            type: horizontal-stack
            cards:
              - type: statistics-graph
                chart_type: line
                period: 5minute
                entities:
                  - sensor.outdoor_temperature
                  - sensor.hue_detecteur_nord_temperature
                  - sensor.hue_detecteur_jardin_temperature
                stat_types:
                  - mean
                  - min
                  - max
                hide_legend: false
                days_to_show: 1
    double_tap_action: {}
    name: ""
    show_name: true
  - show_background: false
    show_state: true
    icon: mdi:weather-dust
    show_name: false
    show_attribute: true
    attribute: unit
    entity: sensor.vent_wind_strength
  - entity: sensor.wind_card
    show_attribute: true
    attribute: info2
    show_icon: false
    name: ""
    show_name: true
    state_background: false
    show_background: true
  - entity: sensor.wind_card
    show_attribute: true
    attribute: info
    show_icon: false
    show_background: true
show_icon: true
icon: ""
force_icon: false
show_name: true
show_last_changed: false
tap_action:
  action: navigate
  navigation_path: "#weather_forecast"
double_tap_action:
  action: none
hold_action:
  action: none
button_action:
  tap_action:
    action: navigate
    navigation_path: "#weather_forecast"
  double_tap_action:
    action: none
  hold_action:
    action: none
attribute: label
show_state: false
styles: |
  .bubble-button-card-container {
    background: transparent;
  }

  .bubble-icon-container {
    background : ${hass.states['sensor.wind_card'].attributes.color } !important;
  }
  .bubble-icon {
    color: black !important;
    transform: rotate(${hass.states['sensor.wind_card'].attributes.info1 }deg);
  }
grid_options:

  columns: 12
  rows: 1

[LarsA]

i want to show a sensor with some attributes. but it’s showing nothing? what am i doing wrong?

type: custom:bubble-card
card_type: template
entity: sensor.postnl_delivery
name: Pakketten
icon: mdi:package-variant-closed
badge:
  entity: sensor.postnl_delivery
  attribute: total_packages
template:
  type: vertical
  content:
    - type: conditional
      conditions:
        - entity: sensor.postnl_delivery
          state: '> 0'
      content:
        - type: text
          text: Pakketten onderweg
          style:
            color: var(--primary-text-color)
        - type: list
          entities:
            - entity: sensor.postnl_delivery
              name: Status
              attribute: status
            - entity: sensor.postnl_delivery
              name: Verwachte levering
              attribute: expected_delivery_date
    - type: conditional
      conditions:
        - entity: sensor.postnl_delivery
          state: '0'
      content:
        - type: text
          text: Geen pakketten onderweg
          style:
            color: var(--secondary-text-color)

[Cloos]

Bubble Card 2

v2.5.0-beta.8

If you missed the previous beta releases, please check this changelog. Then please read this:

Hi everyone!

Here comes v2.5.0-beta.8! This is (again) a major update, because with the arrival of modules, I wanted to keep Bubble Card’s structure as unified as possible to make customization easier (I know many of you use Bubble Card for that reason). More importantly, I wanted to prevent future breaking changes that could affect community-created modules and custom styles.

That’s why this version introduces a lot of structural changes, unifying element classes, CSS styles, code structure, and even card functionalities. These changes might break some of your custom styles and modules, even though I worked hard to avoid that. For example, the cover card now has the exact same structure as the other cards, which could affect your customizations.

This long-overdue task was something I kept postponing, but wow, everything is now so much cleaner and more logical! On top of that, this massive effort will make future maintenance much easier and faster, and I realized it also boosted performance a lot for an even smoother experience on slower devices!

This new structure also gave me maybe a bit too much motivation, leading to tons of new features, like major slider improvements, many new editor options, plenty of optimizations and bug fixes!

You now need to hold it to be able to change its value, it also now support tap and double tap actions!

Plus, the editor is finally more stable and responsive than ever!

I also want to thank @StaleLoafOfBread, @hamayelq and @gregoriohc for their great first contributions!

Also, I really count on you for submitting your issues if you encounter any problems, as I’ve made so many changes

Here’s the full (probably not, I fixed so many things along the way) changelog:

---

New features and enhancements

• CHANGE: Better slider button:
  You now need to hold it to be able to change its value #1014 #1045

• CHANGE: New normal layout for the cover card:
  For better consistency with other cards.

• CHANGE: The large layout is now the default in a section view:
  For section view users, all current and new cards are now defaulted to the large layout. I advise you to keep it this way, this improve usability a lot on mobile devices.

• Min/max/step values for sliders:
  YAML: min_value:, max_value: and step:. #304 #903

• Min/max values for media player volume sliders:
  YAML: min_volume: and max_volume:. #1269

• Min/max/step values for the climate card:
  YAML: min_temp, max_temp: and step:.

• Support for almost all entities in sliders:

  • Native support for battery sensors.
  • All entities with numerical states can now be displayed within a defined range (the entity must be added in YAML mode, min_value: and max_value: are required). This is perfect to display your current power production for example.

• Read-only slider option:
  YAML: read_only_slider: true.

• “Tap action on card” added to most cards:
  Added to sliders, climate, media player, and cover cards.

• Improved usability and accessibility:

  • Larger touch areas for feature buttons.
  • Improved contrast for sub-button icons and labels (auto color change based on background color).
  • Mute icon now visually changes based on volume status in the media player card.

• Better default separator line color:
  Improves contrast on various backgrounds.

• Support for !include in bubble-modules.yaml:
  Matches Home Assistant’s YAML capabilities.

  default:
      !include default.yaml
  

• Brightness transition in light sliders:
  YAML: light_transition: true and light_transition_time: 500 (default). PR #1301 by @hamayelq.

• Min/max temp limits with haptic and visual feedback:
  This one looks fantastic! PR #1306 by @hamayelq.

• subButtonState variable for custom templates:
  For example, you can now finally add subButtonState[0] === 'on' in your templates! PR #1280 by @gregoriohc.

• Show last updated time for entities:
  YAML: show_last_updated: true. PR #1289 by @StaleLoafOfBread.

---

Bug fixes and optimizations

• Refactored a lot of code for better and faster maintenance.

• Optimized memory usage for stable performance over time.

• Improved pop-up performance across all devices and browsers #1211.

• Improved overall performance on all devices #1236.

• Significantly improved editor performance.

• No need to refresh the page after editing pop-ups anymore (finally!).

• Unified classes, CSS, elements, and structure across all cards.

• Fixed various issues with sub-buttons.

• Fixed volume slider issue in media player on iOS #1196.

• Fixed missing “curtain” icon.

• Fixed weather temperature being hidden when 0 #1213.

• Fixed “Card flashing bug” in 2.5.0 beta #1276.

• Fixed missing previous rows value conversion #1277.

• Fixed actions being triggered after dragging over an element #839.

• Fixed module styles priority:
  Styles written in the card now take precedence over module styles. PR #1290 by @StaleLoafOfBread

• Fixed missing ha-icon attribute PR #1329 by @StaleLoafOfBread.

• The +/- buttons in the climate card now respect min/max values.

• Added missing supported entities in the slider editor #1221.

• Fixed “icon color change” issue in beta 2.5.0-beta.6 #1266.

---

Enjoy testing this beta, and thank you for being part of this awesome community!

---

How to test this beta?

The easiest way is to click on the button below, or go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select “Redownload”. You’ll be able to choose the beta version under “Need a different version?”. You can then change back to your previous version if needed.

---

Bubble Card news

---

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

---

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Thank you so much for being part of this amazing community, your support will always makes a huge difference!

---

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

---

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Release Bubble Card v2.5.0-beta.8 · Clooos/Bubble-Card

[GeorgeCastanza]

Thanks, that is amazing! The graph is outside temp (as is 26.4°). The sub buttons are inside per level.

[stefan1982 (Stefan)]

I like that!
Now, I wonder, how does that code looks when you do not use or want to use the decluttering-card?
Any examples?

[GeorgeCastanza]

Yeah, this user did it another way

Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

I found this on another post and adapted and customized to my dashboard, it is not bubble card but stack of different cards together. Hope it is useful type: custom:button-card aspect_ratio: 10/1.5 grid_options: columns: 6 rows: 1 custom_fields: value: card: type: custom:button-card entity: sensor.temperature_sensor_main_bedroom_temperature show_icon: false show_state: true show_name: true name: Temperature styles: name: - po…