Any ideas how to change the background of the sub bubble only card? Tried all the css styles from the docs with no luck
Hello.
Do you know how to expand text (state) closer to edge (left and right side).
I try to use margin and padding od .bubble-state part, but it doesnt work.
Hey @Cloos, I made a dashboard strategy using Bubble Card: 🍬 Bonbon Strategy - A beautiful dashboard strategy. Fully automatic, yet extensible
Love your stuff! Thank you!
1 Like
Unfortunately it doesn’t work:
type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: light.group_all_lights
grid_options:
columns: 3
use_accent_color: false
force_icon: false
show_state: false
show_attribute: true
attribute: brightness
rows: "1.7"
card_layout: large
styles: |2
.bubble-button {
flex-direction: column;
justify-content: center !important;
align-items: center !important;
}
name: Lights
show_last_changed: false
Hi, DBunevich
try this:
type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: light.group_all_lights
grid_options:
columns: 3
use_accent_color: false
force_icon: false
show_state: false
show_attribute: true
attribute: brightness
rows: "1.7"
card_layout: large
styles: |
.bubble-button {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.bubble-name-container {
margin: 0 !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.bubble-name, .bubble-attribute {
text-align: center !important;
margin: 0 !important;
}
name: Lights
show_last_changed: false
1 Like
Thank you so much!
These are the commands which fixed the problem:
.bubble-name-container {
margin: 0 !important;
align-items: center !important;
}
1 Like
Hi, I currently have a custom button card configured as follows:
- type: custom:button-card
name: Add Event to Calendar
tap_action:
action: call-service
service: script.add_google_calendar_event
styles:
card:
- background-color: |
[[[
if (states['input_select.calendar_select'].state == 'option 1') return "#668be1";
if (states['input_select.calendar_select'].state == 'option 2') return "#fdbf6f";
if (states['input_select.calendar_select'].state == 'option 3') return "#e7ba51";
if (states['input_select.calendar_select'].state == 'option 4') return "#dd7835";
if (states['input_select.calendar_select'].state == 'option 5') return "#85ad59";
return "gray";
]]]
I am trying to use a Bubble Button instead to cut down on the number of custom components, however I cannot work how to apply the conditional, state-based style. I have tried some options but to no avail, the latest of which is:
styles: |-
.bubble-button-background {
background-color: >
[[[
if (states['input_select.calendar_select'].state == 'option 1') return "#668be1";
if (states['input_select.calendar_select'].state == 'option 2') return "#fdbf6f";
if (states['input_select.calendar_select'].state == 'option 3') return "#e7ba51";
if (states['input_select.calendar_select'].state == 'option 4') return "#dd7835";
if (states['input_select.calendar_select'].state == 'option 5') return "#85ad59";
return "gray";
]]]
}
I can achieve a fixed colour using:
styles: |-
.bubble-button-background {
background-color: rgba(12,120,50,0.5) !important;
Can anyone help, please?
EDIT: all sorted.
Bubble Card 3
v3.1.1
Hi everyone!
I’m back after a well deserved break with my family, and I feel great! 
Bubble Card v3.1.1 is a maintenance release focused on Home Assistant 2026.2 compatibility, along with other important fixes. This break also gave me time to think about many big ideas for v3.2.0 and the upcoming releases (my brain is never really resting… 
), but I will first focus on v3.1.2 to fix the remaining reported issues.
Just a quick additional note to say that I finally updated the documentation on GitHub, it was about time! And a huge thank you to all of you for the incredibly positive feedback, donations, and new Patreon subscribers since the v3.1.0 release! You’re all truly amazing 
Here’s the full changelog:
Bug fixes and improvements
-
HA 2026.2 compatibility:
Fixed some editor dropdown that were not working after the Home Assistant 2026.2 release. #2184 -
Pop-up scrolling on empty areas:
Scrolling inside pop-ups now works as expected when starting the scroll on empty areas. -
Calendar locale time format:
Fixed calendar cards defaulting to 12-hour clock despite a 24h locale. #1822 (PR #2121 by @wollew, thank you so much!) -
Sub-button CSS classes with special characters:
Fixed generated sub-button CSS classes not working correctly with some special characters (like “é”, “à”, “&”…). -
Mobile slider gesture abort:
Fixed sliders sometimes aborting the slide before releasing on mobile. #2167 #2161 -
Slider sub-button state locale formatting:
Fixed state on slider sub-buttons not using locale formatting. #2171 -
Slider sub-button visibility conditions:
Fixed visibility conditions for slider sub-buttons not working in all cases. #2170
Bubble News 
Over the past few years, I’ve been working on Bubble Card almost every day to make it the best it can be, and I still can’t believe how much it has grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding
This is why I decided to create a Patreon as a way to offer something more for those who want to support me. A few days ago, I refreshed my Patreon with two new modules: Bubble Badges v2 (unlimited badges on any sub-button or the main icon) and Bubble Weather (animated weather backgrounds with daily/hourly forecasts). The custom dropdown module is still there if you want full control over labels, icons, and actions on select cards and sub-buttons.
I’m also finally happy with my own dashboard (there is a short video of it in this Reddit post), built entirely with Bubble Card v3.1.0 and only new custom modules I’ve been working on for months! Like one that adds unique colors and styles to all cards, one for the weather, one for graphs, square cards, time… I’ll release more of these modules soon, with a detailed post on Patreon and a new YouTube video. I would love to know what you think!
Thank you so much for being part of this amazing community, your support always makes a huge difference!
I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card, and I really hope you will enjoy my videos. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!
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:
Also, if you ever want to grab me a fresh beer, here are two easy ways
5 Likes
Hello guys,
Does anyone know if there is a way to re-activate a “scene” from the dropdown list if it has already been activated before?
At the moment, I have to create a dummy “blank” button that needs to be pressed before switching back to the scene, otherwise, the scene will not be triggered.
Hi! I used to be able to position the image inside ha-tile-icon so it could overflow outside the circular area (using card_mod + CSS like negative top/left). In older versions it worked and the icon/picture could “stick out” of the circle.
After updating, the same CSS no longer works: the image gets clipped inside the circle and cannot overflow anymore. I tried forcing overflow: visible on the card and on ha-tile-icon shadow parts, but it still clips—looks like a wrapper now applies overflow: hidden / clip-path / mask / contain: paint.
Was there a change that prevents overflow by design? If yes, is there an official way to allow elements inside the tile icon to overflow outside the circle again?
One more issue I noticed after updating to the new version:
Every time the dashboard (or pop-up) opens, Bubble Cards seem to reload / re-render, causing a visible refresh/loading behavior. This did not happen in older versions — cards were already rendered and appeared instantly.
Now it feels like the cards are being rebuilt on each open, which causes flickering and a short reload effect, especially noticeable on mobile and low-end tablets.
Is this an intended change in the new version, or could it be related to a regression / state handling update?
I would like to have the second bubble card (with my office image and the two sensors as sub buttons) replace the header. Meaning, I would like to have the close button on that bubble card. Is that possible?
Like so (but the close button being more translucent):
Does anyone know what to do?
1 Like
Got it to work myself:
- entity: sun.sun
icon: mdi:close
name: Schließen
tap_action:
action: navigate
navigation_path: "#"
state_background: false
show_state: false
4 Likes
Thank you for this wonderful update. It´s getting even better!
I´m having some trouble to use the slider sub button. I would like it to control the color temp, but it remains as a brightness control. I already tryed many things.
Here is the code and a print of what I’m getting:
sub_button:
- entity: light.h801_1
sub_button_type: slider
attribute: color_temp
show_background: true
show_icon: true
fill_width: false
show_attribute: true
always_visible: true
slider_options:
min: 150
max: 500
step: 1
I would appreciate any comment to point me to the right direction
I see that there are a couple of components etc. here that one can use. But I struggle to find fully-fledged dashboards, templates etc. Can I find that somewhere? Essentially, I am looking for a “starting point” for a nice looking and functional UI to build from.
I tried the GitHub - Clooos/Home-Assistant-Mobile-First: A minimalist and user-friendly design, combined with an mobile first approach for the Home Assistant dashboard. by Clooos but that appears that it is no longer maintained and when i tried installing it, it seemed to have quite a few bugs even when all required dependencies (HACS) were installed. I also tried the GitHub - Clooos/Bubble: A dark minimalist theme with a mobile first approach for Home Assistant theme, but that seemed to be very simple as well and the user would still have to configure it.
Hey there,
sorry, if my issue is discussed already I tried to read the thousands of threads - but could be that I did not notice it.
My Code is
type: custom:simple-tabs
pre-load: true
active-background: var(--md-sys-color-on-primary)
active-text-color: var(--md-sys-color-primary)
text-color: var(--primary-text-color)
tabs:
- title: Home
icon: mdi:home
card:
type: markdown
content: 🏠 Willkommen
- title: Rooms
icon: mdi:floor-plan
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
name: Wohnzimmer
icon: mdi:sofa
entity: sensor.wohnzimmer_temperature
show_state: true
tap_action:
action: navigate
navigation_path: "#livingroom"
styles: |
.bubble-button-background {
background: linear-gradient(135deg, #4FC3F7, #00F2FE);
box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
}
The popup does only appear if I click the icon - I would like to open it also when I click on the name “Wohnzimmer” . For short: I want the entire button-card to open the popup. What do I have to do?
Hope ou guys could help me 
Cheers Nic
replace “tap_action” with:
button_action:
tap_action:
action: navigate
navigation_path: "#livingroom"
Would you share the complete YAML code with us? It looks amazing.
type: custom:bubble-card
card_type: button
button_type: name
name: Livingroom
icon: mdi:lamp
button_action:
tap_action:
action: navigate
navigation_path: "#livingroom"
is the same of Nic0205, but the bubble card cannot be button… it has to be “name”…
@Cloos, I am very sorry for disturbing.
Is there any chance for you to share advise here if it is doable?
Just trying to make the background of a Popup transparent, for a normal bubble card it’s not an issue. But how is this possible for a popup? In the styles documentation GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch. there is an example but it’s mentioned there this will not work for the popup. Any idea?