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

ecchodun · September 21, 2025, 4:54pm

I want to create a bubble-card with just an icon. Unfortunately, the following merely displays a small white circle and nothing more.

              - type: custom:bubble-card
                card_type: button
                name: ""
                show_icon: true
                icon: mdi:cog
                styles: |
                  .bubble-button-card-container {
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                    width: 75px !important;
                    height: 75px !important;
                    padding: 0 !important;
                  }
                  .bubble-button-card-container .button-content {
                    display: flex !important;  /* must be visible for icon to show */
                    justify-content: center;
                    align-items: center;
                  }
                  .bubble-button-card-container ha-icon {
                    color: white !important;
                    --mdc-icon-size: 48px;
                  }
                button_type: switch
                entity: input_boolean.alarm_settings
                button_action:
                  tap_action:
                    action: navigate
                    navigation_path: '#alarm_settings'
                tap_action:
                    action: navigate
                    navigation_path: '#alarm_settings'

Cloos · September 28, 2025, 10:59am

Bubble Card 3

v3.0.4

Hi everyone!

This update wasn’t originally planned, as I’m currently focused on the upcoming v3.1.0 (see my latest Reddit posts, like this one). However, the October Home Assistant update introduced a change that broke the opening of the Module Store in the editor. Since this is a critical part of Bubble Card, I decided to release v3.0.4 first to fix it and include a set of other improvements and new features along the way!

Here’s the full changelog:

New features and enhancements

Climate card temperature control toggle:
You can now choose to hide the temperature control section in the climate card.
Stop button support in media player card:
The media player card now shows a stop button when needed. #1792
Auto show/hide media player buttons:
Buttons in the media player card now appear or disappear automatically depending on availability.
Unlocked state is now an active state:
For better highlight.
Connectivity binary sensor icon update:
The correct icon is now used for binary_sensor with connectivity type. #1793
Double tap/hold support for select cards and sub-buttons:
Select cards and sub-buttons now support both double tap and hold actions. #1729
Hold action improvements:
Hold actions now trigger only on release, with a clear hold visual indicator for consistency with HA cards. #1781
CSS variables:
- --bubble-light-white-color: customize the default light white color. #692
- --bubble-select-arrow-background-color: now applied to the whole sub-button. #1788

Bug fixes and improvements

Editor compatibility with HA v2025.10:
The “My Modules” and “Module Store” tabs are now working correctly in the editor after the new Home Assistant update. #1844
Sidebar swipe conflict resolved:
Left-edge swipes to open the Home Assistant sidebar no longer move sliders.
Smoother first pop-up opening:
Pop-ups now open faster and more reliably, especially on the first launch.
Pop-up history cleanup:
After each pop-up is opened, duplicate history entries are no longer created. This fixes the need to press “back” multiple times. #1743
Climate card whole number display:
When the step value does not include decimals, the climate card now shows whole numbers.
Sub-button attributes list fixed:
The attributes list now displays correctly in “Name / Text” sub-buttons. #1798
Pinch-to-zoom enabled on mobile:
You can now pinch-to-zoom when using a mobile device. #1770

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 three videos so far, an introduction explaining the project, a first tutorial on how to create your first pop-up and a video about the new features in Bubble Card 3. 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 should cover the new global variables, as well as custom styles, templates and modules, 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 modules, custom styles, and templates. For example, I’ve added this module that lets you fully customize the labels, icons, and icon colors of dropdown items, while also defining actions or adding navigation to pop-ups or dashboard pages. It works with both the main select card and sub-buttons in supported cards, making it perfect for quick controls, a vacuum room selector, or even a light color picker.

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:

SteffenDE · September 29, 2025, 3:29pm

Hi,

is there a card_mod to get mushroom and default cards to look like bubble cards?

Top is a mushroom-template-card and second is a bubble (button) card:

There is a module to get bubble to look like mushroom but I want a bubble design over all.

Thanks.

Siumba · September 30, 2025, 12:18pm

I configured the bubble card to my desire, however I’m still running into one small weird issue. I want to show the state and attribute, but in a conditional way. So when the entity is off, I want it to show “Off” but when the entity is on I want to show the brightness level. With card_mod added I can manipulate this, but after a few re-renders it just ignores card_mod and falls back to a “On - 65%” like of showing, where I only want to see “65%”. Is there anyone that has managed this reliably? Ideally I would just like to set “show_state” to true/false via some logic:

ErikSteiner · October 4, 2025, 10:12am

Hey there, I use a horizontal-buttons-stack as a navigation bar.

I would like to add a little notification icon to each room-card on the horizontal-buttons-stack, if for instance the window is open.

Is there anybody, that can help me with that?

ErikSteiner · October 5, 2025, 1:52pm

Another question, that comes to my mind. If I click a button, to show a bubble card, it is pretty handy to me to click on automations, that are displayed with auto-entities. However, most of the time, I want to click on an automation, press the three little dots and edit an automation.

The problem is, that bubble card adds a fade out black background effect, that is still visible, when I enter the automation editing. This is logical, as the bubble card is still present in the background, but now being in the editing mode of the automation, it is applied in the foreground. Making it impossible to see or do anything.

Is it possible to turn that effect of, or more suitable turn it off, if I physically leave the bubble card?

The thing is, that opening the dashboard the first time, the fading effect is applied correctly, even if I enter the edit entity mode. However, doing it a second time will mess it up.

voydz · October 7, 2025, 8:42pm

Hi @Clooos Did this feature land already? I cannot find it.
Personally I would also be fine, if you could just share some of your dashboard magic unpolished, to spark my creativity.

I can imagine that Bubble Card is quite a big project now and the header bar and maybe some future custom dashboard elements (like Weather etc.) are a bit out of scope for it. I would really like to see an additional „Bubble Card Companion“ package with cards that go well with Bubble Card but are out of the scope of the project itself.

best regards

SteffenDE · October 8, 2025, 10:38am

Hi,

great card with bubble and chart. I try to get the card looking this on mobile devices too.

If I desgin the card it looks fine on desktop, but on mobil devices the minus offset do not match because the cards are smaller.

On Desktop it looks with apexchart:

On iPhone it looks:

Any hint how to handel this?

Here is my code:

type: vertical-stack
card_mod:
  style: |
    ha-card {
      overflow: visible;
      height: 56px;
    }
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.tmp_weather_forecast_niederschlagswahrscheinlichkeit
    name: Regenwahrscheinlichkeit
    scrolling_effect: false
    show_name: true
    tap_action:
      action: none
    card_layout: large
    show_attribute: false
    show_state: true
    show_icon: true
    rows: "1"
    sub_button:
      - entity: sensor.dwd_wetter_stadion_wiesbaden_niederschlagswahrscheinlichkeit
        show_background: false
        show_icon: false
        show_state: true
        tap_action:
          action: none
    styles: |
      ha-card {
        position: relative; /* z-index greift nur bei positioniertem Element */
        z-index: 1;         /* liegt über dem Chart */
      }
      .bubble-sub-button {
        font-size: 20px !important;
      }
    button_action:
      tap_action:
        action: none
  - type: custom:apexcharts-card
    card_mod:
      style: |
        ha-card {
          background: transparent;
          box-shadow: none;
          pointer-events: none;
          opacity: 0.1;

          /* Höhe des Charts für die Überlappung: passe bei Bedarf an */
          --chart-h: clamp(84px, 18vw, 120px);

          /* Ziehe die Karte nach oben, damit sie die Bubble überlappt */
          margin-top: calc(var(--chart-h) * -1 + 44px);

          /* Optional: begrenze die Breite & zentriere */
          width: calc(100% - 32px);
          height: calc(100cqh - 48px);
          margin-left: 50%;
          margin-right: auto;

          z-index: 2;
        }
    apex_config:
      chart:
        height: 48px
        width: 40%
        sparkline:
          enabled: true
      markers:
        size: 0
      grid:
        show: false
      tooltip:
        enabled: false
      legend:
        show: false
    experimental:
      color_threshold: true
    graph_span: 24h
    span:
      start: hour
      offset: "-1h"
    hours_12: false
    cache: true
    layout: minimal
    series:
      - entity: sensor.dwd_wetter_stadion_wiesbaden_niederschlagswahrscheinlichkeit
        name: Regen
        type: area
        stroke_width: 4
        curve: monotoneCubic
        fill_raw: last
        color: cyan
        show:
          legend_value: false
          in_header: false
        color_threshold:
          - value: 0
            color: cyan
          - value: 50
            color: "#FFC107"
          - value: 75
            color: "#F44336"
        data_generator: >
          const now = Date.now() - 60 * 60 * 1000; const daten =
          entity.attributes.data; return daten
            .filter(d => new Date(d.datetime).getTime() >= now)
            .map(d => [new Date(d.datetime).getTime(), d.value]);

urtaevS · October 8, 2025, 12:18pm

How I can remove background for person entity in button(State) card?

GeorgeCastanza · October 9, 2025, 12:01am

Sorry, not sure. It works fine on my Android (app and browser).

Zenia · October 9, 2025, 5:35pm

I need some help with pop up. I try to trigger pop up card from paper-row card, and it’s pop, but not go away at all , unless I reload my page. What I am doing wrong?

type: custom:paper-buttons-row
styles:
  justify-content: flex-start
  flex-wrap: wrap
  font-size: 1.1em
  line-height: 1.1em
  margin: 6px 0 12px 0
  width: 100%
buttons:
  - layout: icon
    image: /local/nhl_logos/capitals.png
    tap_action:
      action: navigate
      navigation_path: /mobile-home/#capitals
    styles:
      button:
        flex-basis: 1
        flex-shrink: 0
  - layout: icon|name
    tap_action:
      action: navigate
      navigation_path: /mobile-home/#capitals
    name: >
      {{ state_attr('sensor.capitals_tracker', 'team_name') }} {{
      state_attr('sensor.capitals_tracker', 'team_score') }} - {{
      state_attr('sensor.capitals_tracker', 'opponent_score') }} {{
      state_attr('sensor.capitals_tracker', 'opponent_name') }}
    styles:
      button:
        flex-basis: 1
        flex-shrink: 0
      name:
        color: white
  - layout: icon|name
    image: "{{ state_attr('sensor.capitals_opponent_logo', 'opponent_logo') }}"
  - layout: icon|name
    tap_action:
      action: toggle
    name: |
      {{ state_attr('sensor.capitals_tracker', 'kickoff_in') }} at {{
       state_attr('sensor.capitals_tracker', 'venue') }} {{state_attr('sensor.capitals_tracker', 'clock') }}
    styles:
      button:
        flex-basis: 1
        flex-shrink: 0
      name:
        color: white

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#capitals"
    button_type: name
    show_name: true
    close_on_click: true
  - type: custom:teamtracker-card
    entity: sensor.capitals_tracker
    alignment: justify
    visibility:
      - condition: state
        entity: sensor.capitals_tracker
        state_not: unknown
    outline: true
    grid_options:
      columns: full
      rows: 5
    home_side: left
    show_league: false
    card_mod:
      style: |-
        ha-card {
          font-size: 12px !important;
          background: none !important;
        }

Thank you

surfingpopp · October 11, 2025, 7:14pm

Dear community,

Im using HA for some months now. Its really a incredible tool and I got addicted to continously improve and work on it.

Few days ago, I have installed also bubble card and got a lot of things running so far.
But I never have achieved to get the puple design, which is shown in most tutorials. Here is a example.

Can someone please tell me how toget the purpele background and green buttons?
Thank you very much.

Have a nice weekend.

Chykan · October 11, 2025, 11:06pm

It is most likely a theme

surfingpopp · October 12, 2025, 4:26pm

Thank you-that was the hint I needed.
I thought this thime was automatically part of the bubble card…
I got it working now.

levonisyas · October 13, 2025, 4:35pm

Hello
I have Panel (single card) and running Interactive floor 3d plan.
How can i use Bubble Card Horizontal buttons stack with my panel (single card)?
How can i disable frozen background? (semitransparent white page covers)
Attached picture is what i want to make (photoshop image)

SteffenDE · October 14, 2025, 2:37pm

Opening a Bubble Popup with an ApexChart shows no chart.

After cleaning Browser Cache or Clean Opening HA-App shows the Popup without the Chart. After changing Tab or HA Menu an go back the Popup comes up with the Chart. If I Using same Chart-Konfig without Bubble-Popup everything is fine. Asking AI says is rendering problem in the Popup calling Timing / Race Condition.

Any hint to solve this?

Here is a sample code:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    button_type: state
    card_layout: large
    hash: "#regenwahrscheinlichkeit"
    entity: sensor.tmp_weather_forecast_niederschlagswahrscheinlichkeit
    name: Regenwahrscheinlichkeit (48h Vorhersage)
    show_header: true
    show_name: true
    modules: []
    tap_action:
      action: none
    button_action:
      tap_action:
        action: none
    show_state: false
    show_attribute: true
    attribute: vorhersagetext
  - type: custom:apexcharts-card
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          height: 300px;
          min-height: 300px;
          margin: 0 !important;
          padding: 0 !important;
          transform: translateZ(0);
          will-change: transform;
        }
    experimental:
      color_threshold: true
    cache: true
    graph_span: 2d
    span:
      start: hour
      offset: +0H
    hours_12: false
    header:
      show: false
      show_states: false
      colorize_states: false
    show:
      loading: true
      last_updated: true
    apex_config:
      chart:
        height: 250
        offsetY: 10
        offsetX: 0
        animations:
          enabled: true
      stroke:
        width: 0
        curve: monotoneCubic
      fill:
        type: gradient
      legend:
        show: false
      grid:
        show: true
        borderColor: grey
        strokeDashArray: 1
        position: back
        xaxis:
          lines:
            show: false
        yaxis:
          lines:
            show: true
      markers:
        size: 0
      tooltip:
        enabled: false
      xaxis:
        type: datetime
        axisBorder:
          show: true
          color: white
          height: 1
        axisTicks:
          show: true
          color: white
        labels:
          show: true
          datetimeUTC: false
          rotate: -40
          rotateAlways: true
          format: ddd. HH:mm
          style:
            fontSize: 12px
            fontWeight: bold
            fontFamily: Raleway,sans-serif
      yaxis:
        show: true
        title:
          text: Regenwahrscheinlichkeit [%]
          style:
            color: "#1ABC9C"
            fontSize: 12px
            fontWeight: bold
            fontFamily: Raleway,sans-serif
        seriesName: Regen
        decimalsInFloat: 0
        min: 0
        max: 100
        stepSize: 25
        forceNiceScale: true
        axisBorder:
          show: true
          color: "#1ABC9C"
          width: 1
        axisTicks:
          show: true
          color: "#1ABC9C"
        labels:
          show: true
          style:
            colors: "#1ABC9C"
            fontSize: 12px
            fontWeight: bold
            fontFamily: Raleway,sans-serif
        crosshairs:
          show: true
      dataLabels:
        enabled: false
        formatter: |
          EVAL:(val, opts) => (opts.dataPointIndex % 6 === 0 ? val : '')
        offsetX: 2
        offsetY: -10
        style:
          fontSize: 12px
          fontWeight: lighter
        background:
          borderWidth: 0
          opacity: 0.1
          foreColor: "#1ABC9C"
    series:
      - entity: sensor.tmp_weather_forecast_niederschlagswahrscheinlichkeit
        name: Regen
        type: area
        color: "#1ABC9C"
        fill_raw: last
        extend_to: false
        show:
          name_in_header: false
          datalabels: true
        group_by:
          duration: 1h
          func: avg
        color_threshold:
          - value: 0
            color: "#1ABC9C"
          - value: 35
            color: "#F1C40F"
          - value: 55
            color: "#E67E22"
          - value: 75
            color: "#E74C3C"
        data_generator: >
          const daten = entity?.attributes?.data; if (!daten || daten.length ===
          0) return []; const now = new Date(); now.setMinutes(0,0,0); const
          startTime = now.getTime(); const maxTime = startTime + 48*3600*1000;
          return daten
            .map(d => {
              const t = new Date(d.datetime).getTime();
              const v = Number(d.value);
              return (Number.isFinite(t) && Number.isFinite(v) && t >= startTime && t <= maxTime) ? [t,v] : null;
            })
            .filter(x => x !== null);

Zenia · October 21, 2025, 1:56pm

I tried to match all icons (transparent) and success everywhere, except climate cards sub buttons. Can someone, please help me with that. Thank you

type: custom:bubble-card
card_type: climate
sub_button:
  - name: HVAC modes menu
    select_attribute: hvac_modes
    show_arrow: false
  - entity: climate.first_floor_thermostat
    select_attribute: fan_modes
    name: Fan Mode
    icon: ""
    hide_when_parent_unavailable: false
name: First floor
show_state: true
show_attribute: true
attribute: current_temperature
theme: ios-dark-mode
modules:
  - default
  - smart_icons
  - icon_animations
  - animated_icon
  - icon_color
styles: |
  ha-card {
    --bubble-main-background-color: none !important;
    --bubble-climate-accent-color: gray !important;
    --bubble-climate-icon-background-color: none !important;
    --bubble-climate-button-background-color: none !important;
  }
icon: phu:thermostat
entity: climate.first_floor_thermostat
state_color: true
hide_temperature: false
subbutton_animations:
  subbutton1:
    animation: sound
icon_color:
  use_hex: true
  color_hex: "#FFFFFF"

Zenia · October 22, 2025, 10:31am

I found a fix for my problem. I use a sub button color module created by HenryJIII. Thank you

manuel_R · October 31, 2025, 9:00am

Hello, would it be possible to share the cards from this page? I’ve signed up for Patreon but I can’t find them. Thank you for your work and your time.
@Cloos

laurens362 · October 31, 2025, 9:46am

Its a sneak preview of his next update