Define background? The slider uses an overlay an opacity
my blue is 33,33,33 and I want the yellow → 138,153,119 . so the slider needs to be somewhat greenish
type: custom:bubble-card
card_type: button
button_type: slider
entity: input_boolean.test4
icon: mdi:power
name: ' '
styles: |
.range-fill {
background: rgb(138,153,119) !important;
}
.bubble-button-card-container {
background: #808080 !important;
}
1 Like
Here is my vacuum card, a bit more complex than the one from @Freshhat. The battery icon is also changing based on the real state of the battery. I’ve used the large layout for that one.
type: custom:bubble-card
card_type: button
button_type: switch
card_layout: large
name: Robot RDC
icon: mdi:robot-vacuum
entity: vacuum.aspirateur_rez_de_chaussee
show_state: true
show_last_changed: true
tap_action:
action: more-info
button_action:
tap_action:
action: more-info
sub_button:
- name: Battery
icon: mdi:battery
show_background: false
show_attribute: true
attribute: battery_level
- name: Return to dock
entity: vacuum.aspirateur_rez_de_chaussee
icon: mdi:home
show_background: false
tap_action:
action: call-service
service: vacuum.return_to_base
target:
entity_id: vacuum.aspirateur_rez_de_chaussee
- name: Pause
entity: vacuum.aspirateur_rez_de_chaussee
icon: mdi:pause
show_background: false
tap_action:
action: call-service
service: vacuum.pause
target:
entity_id: vacuum.aspirateur_rez_de_chaussee
- name: Start
entity: vacuum.aspirateur_rez_de_chaussee
icon: mdi:play
tap_action:
action: call-service
service: vacuum.start
target:
entity_id: vacuum.aspirateur_rez_de_chaussee
styles: >-
.bubble-button-card-container {
background: ${hass.states['vacuum.aspirateur_rez_de_chaussee'].state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
}
.bubble-icon {
color: white !important;
}
.bubble-icon-container {
background: rgb(230, 100, 180);
}
.bubble-sub-button {
height: 48px !important;
min-width: 48px !important;
}
${subButtonIcon[0].setAttribute("icon",
hass.states['vacuum.aspirateur_rez_de_chaussee'].attributes.battery_icon)}
2 Likes
For templating the name of a separator you can do that for example (the icon is changing too based on the weather), take a look at the Templates section in the documentation, I’ve added many examples.
type: custom:bubble-card
card_type: separator
icon: mdi:weather-cloudy
sub_button:
- entity: sensor.temperature_interieure
icon: mdi:thermometer
name: Temperature
show_state: true
show_background: false
styles: >
.bubble-line {
background: white;
opacity: 1;
}
${card.querySelector('.bubble-name').innerText = "It's currently " +
hass.states['weather.maison'].state}
${icon.setAttribute("icon",
getWeatherIcon(hass.states['weather.maison'].state))}
3 Likes
Awesome!. Thanks 
Like the idea with icon changing depending on battery level. Do you know how i can retrieve this from a battery sensor? So it’s not an attribute from my lawn mower, i have a separate sensor for the battery
I can see in the entities overview that the icon is already changing depending on the level
This should works without any templates by removing the icon in your YAML.
sub_button:
- entity: sensor.mower_battery_2
name: Akku
show_background: false
show_state: true
1 Like
Wow thanks sometimes it’s that easy. Was working with removing the icon in the sub button.
1 Like
First time using bubble cards. They look very nice, but I can’t seem to make the sub_button work. It is not showing up on my buttons. Something I forgot to install?
This is possible indeed, I’ve just tried and you can do that, it add a capital letter by default so I’ve removed the “It’s currently”. “Nuageux” means “Cloudy” in French.
type: custom:bubble-card
card_type: separator
icon: mdi:weather-cloudy
sub_button:
- entity: sensor.temperature_interieure
icon: mdi:thermometer
name: Temperature
show_state: true
show_background: false
styles: >
.bubble-line {
background: white;
opacity: 1;
}
${card.querySelector('.bubble-name').innerText =
hass.formatEntityState(hass.states['weather.maison'])}
${icon.setAttribute("icon",
getWeatherIcon(hass.states['weather.maison'].state))}
I will add this example in the documentation, I didn’t realized that it was possible to do that in the templates.
1 Like
Can you share your YAML? Also, do you use the editor for that?
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
name: Living
icon: mdi:sofa
entity: light.woonkamer_2
sub_button:
- name: All
icon: mdi:power
entity: light.woonkamer_2
show_icon: true
show_attribute: true
button_action:
tap_action:
action: toggle
tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:ceiling-light-multiple-outline
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.woonkamer_2
show_state: true
icon: mdi:ceiling-light-multiple
name: All
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.eettafel
show_state: true
icon: mdi:ceiling-light
name: Eettafel
- type: custom:bubble-card
card_type: button
entity: light.woonkamer
show_state: true
button_type: slider
icon: mdi:ceiling-light
name: Zetel
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: button
entity: light.staanlamp
show_state: true
button_type: slider
icon: mdi:floor-lamp-torchiere
- type: custom:bubble-card
card_type: separator
name: Media
icon: mdi:speaker
- type: horizontal-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.living
- type: custom:mushroom-media-player-card
entity: media_player.samsung_q60_series_55
name: Tv
- type: horizontal-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.woonkamer
I am using the yaml editor. I even tried to copy one of you examples of the docs with subbuttons but same result.
Seems to be a visual bug in the browser. When I use my phone I am seeing the sub_button
Nice! Try to clear your browser cache, this should works after that.
Here’s an interesting quirk…I’m editing my bubble card dashboard from my laptop for ease of copy/paste. When I use my mouse/trackpad to tap a bubble button, it’s treated as a double tap or long hold (not sure which) and it pulls up the more info dialog. But if I use the screen to tap a button, it does the toggle behavior.
Is this expected?
I’m using Goggle Chrome on Windows 11, if that matters…
This is strange, I’m also using a laptop (MacBook Pro) but I don’t have this issue.
Can you take a look at this? Maybe this will help.
@Cloos would there be any way that we could get a way to manually re-order the horizontal buttons stack? Thanks.
Hi, you can do this only in YAML for now, but I’m planning to do a lot of changes and to add new features to the horizontal buttons stack, reordering in the editor is in my to-do list as well.
1 Like