Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork142
Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
License
Clooos/Bubble-Card
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Bubble Card is a minimalist and customizable card collection for Home Assistant with a nice pop-up touch... and a Module Store!
InstallationConfigurationPop-upHorizontal buttons stackButtonMedia playerCoverSelectClimateCalendarSeparatorEmpty columnSub-buttons onlySub-buttonsCard layoutsActionsStylingTemplatesModulesHelpDonate
Home Assistant lowest supported version: 2023.9.0
Without HACS
- Download these files:bubble-card.js andbubble-pop-up-fix.js
- Add these files to your
<config>/wwwfolder - On your dashboard click on the icon at the right top corner then on
Edit dashboard - Click again on that icon and then click on
Manage resources - Click on
Add resource - Copy and paste this:
/local/bubble-card.js?v=1 - Click on
JavaScript ModulethenCreate - Go back and refresh your page
- You can now click on
Add cardin the bottom right corner and search forBubble Card - After any update of the file you will have to edit
/local/bubble-card.js?v=1and change the version to any higher number
If it's not working, just try to clear your browser cache.`
With HACS (Recommended)
This method allows you to get updates directly on the HACS main page
- If HACS is not installed yet, download it following the instructions onhttps://hacs.xyz/docs/setup/download/
- Proceed to the HACS initial configuration following the instructions onhttps://hacs.xyz/docs/configuration/basic
- On your sidebar go to
HACS>Frontend - Click on the
+button at the bottom right corner - Now search for
Bubble Cardand then click on the button at the bottom right corner to download it - Go back on your dashboard and click on the icon at the right top corner then on
Edit dashboard - You can now click on
Add cardin the bottom right corner and search forBubble Card
If it's not working, try to clear your browser cache.
You can also take a look at my YouTube channel for step by step videos.
All options can be configured in the Home Assistant editor. But you can find more details and the YAML in the documentation below.
Main options (YAML + description)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
type | string | Required | custom:bubble-card | Type of the card |
card_type | string | Required | button,calendar,climate,cover,empty-column,horizontal-buttons-stack,media-player,pop-up,select,separator orsub-buttons | Type of the Bubble Card, see below |
styles | object list | Optional | Any CSS stylesheets | Allows you to customize your Bubble Card CSS, seestyling |
Global CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-border-radius | px | Border radius for all supported elements |
--bubble-main-background-color | color | Main background color for all supported elements |
--bubble-secondary-background-color | color | Secondary background color for all supported elements |
--bubble-accent-color | color | Accent color for all supported elements |
--bubble-icon-border-radius | px | Icon border radius for all supported elements |
--bubble-icon-background-color | color | Icon background color for all supported elements |
--bubble-sub-button-border-radius | px | Border radius for all sub-buttons |
--bubble-sub-button-background-color | color | Background color for all sub-buttons |
--bubble-box-shadow | seebox shadow | Box shadow for all supported elements |
--bubble-border | seeborder | Border for all supported cards |
Check out thisvideo to learn about Bubble Card and its capabilities. My YouTube channel is quite new and focuses on tutorials about Home Assistant and Bubble Card. Don’t hesitate to subscribe to help increase my channel’s visibility. Thank you in advance!
This card allows you to convert any vertical stack into a pop-up. Each pop-up ishidden by default and can be opened by targeting its link (e.g.'#pop-up-name'), with any card that supports thenavigateaction, or with thehorizontal buttons stack that is included.
Important
To avoid misalignment with your view, place this card after all other dashboard cards. You can't trigger it from a different view.
For YAML only users: This card must be placed within avertical stack card at the topmost position to function properly. See example below.
You can also watchthis step by step video. This video is bit outdated, you don't need to create a vertical stack anymore, it will be added automatically.
Tip
This feature allows you to open a pop-up based on the state of any entity, for example, you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.
Opening a pop-up when abinary_sensor ison
type:custom:bubble-cardcard_type:pop-uphash:'#kitchen'name:Securityicon:mdi:videotrigger_entity:binary_sensor.front_door_motiontrigger_state:'on'trigger_close:true
They are many ways to close a pop-up. For instance, you can swipe from the pop-up header to the bottom, by doing a long swipe inside the pop-up to the bottom, by pressing Escape on desktop, by removing the hash in the URL or by simply pressing the close button.
If you notice that pop-up content appears upon page load, consider installing this fix as an additional module.
Installation
You can do this by addingbubble-pop-up-fix.js to yourconfiguration.yaml like so:
frontend:extra_module_url: -/hacsfiles/Bubble-Card/bubble-pop-up-fix.js
If you didn't install it with HACS, change the path accordingly. Then, clear your browser cache.
For Android Home Assistant Companion App users, you can close the app, then clear the app cache. If it's still not working, you can close and restart the app again.
For iOS Home Assistant Companion App users, you can go to your Home Assistant settings, then navigate to Companion App > Debug > Clear Frontend Cache (or something similar), then refresh the page or restart the app.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
hash | string | Required | Any unique hash (e.g.'#kitchen') with ' ' | This is how you will open your pop-up |
auto_close | string | Optional | A timeout in milliseconds (e.g.10000 for 10s) | Auto close the pop-up after a timeout |
close_on_click | boolean | Optional | true orfalse (default) | Automatically close the pop-up after any interaction |
close_by_clicking_outside | boolean | Optional | true (default) orfalse | Close the pop-up by clicking outside of it |
width_desktop | string | Optional | Any CSS value | Width on desktop (100% by default on mobile) |
margin | string | Optional | Any CSS value | Use thisonly if your pop-up is not well centered on mobile (e.g.13px) |
margin_top_mobile | string | Optional | Any CSS value | Top margin on mobile (e.g.-56px if your header is hidden) |
margin_top_desktop | string | Optional | Any CSS value | Top margin on desktop (e.g.50vh for a half-sized pop-up orcalc(100vh - 400px) for a fixed height of400px) |
bg_color | string | Optional | Any hex, rgb or rgba value | The background color of your pop-up (e.g.#ffffff for a white background) |
bg_opacity | string | Optional | Any value from0 to100 | The background opacity of your pop-up (e.g.100 for no transparency) |
bg_blur | string | Optional | Any value from0 to100 | The background blur effect of your pop-up,this only work ifbg_opacity is not set to100 (e.g.0 for no blur) |
shadow_opacity | string | Optional | Any value from0 to100 | The shadow opacity of your pop-up (e.g.0 to hide it) |
hide_backdrop | boolean | Optional | true orfalse (default) | Set this to true on the first pop-up of your main dashboard to disable the backdrop on all pop-ups. |
background_update | boolean | Optional | true orfalse (default) | Update pop-up content in background (not recommended) |
trigger_entity | string | Optional | Any entity | Open this pop-up based on the state of any entity |
trigger_state | string | Optional (Required iftrigger_entity is defined) | Any entity state | Entity state to open the pop-up |
trigger_close | boolean | Optional | true orfalse (default) | Close the pop-up whentrigger_state is different |
open_action | object | Optional | Seeactions | Trigger an action when the pop-up is opening |
close_action | object | Optional | Seeactions | Trigger an action when the pop-up is closing |
show_header | boolean | Optional | true orfalse (default) | Show/Hide the pop-up header fully |
| You also have access toall the button settings for the header of the pop-up. | Optional | If undefined no header will be shown |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-pop-up-border-radius | px | Border radius for the pop-up |
--bubble-pop-up-main-background-color | color | Main background color for supported elements of the pop-up |
--bubble-pop-up-background-color | color | Background color of the pop-up |
--bubble-backdrop-background-color | color | Background color for the backdrop |
| You also have access toall the button CSS variables for the header of the pop-up. |
A pop-up
type:vertical-stackcards: -type:custom:bubble-cardcard_type:pop-uphash:'#kitchen'name:Kitchenicon:mdi:fridgeentity:light.kitchen
A button to open the pop-up
type:custom:bubble-cardcard_type:buttonbutton_type:namename:Kitchenicon:mdi:fridgebutton_action:tap_action:action:navigatenavigation_path:'#kitchen'
A pop-up with a fixed height
Replace400px with the size you need.
type:vertical-stackcards: -type:custom:bubble-cardcard_type:pop-uphash:'#kitchen'name:Kitchenicon:mdi:fridgeentity:light.kitchenmargin_top_mobile:calc(100vh - 400px)margin_top_desktop:calc(100vh - 400px)
This card is a good companion to the pop-up card, allowing you to open the corresponding pop-ups. It also allows you to open any page of your dashboard. In addition, you can add your motion/occupancy sensors so that the order of the buttons adapts according to the room you just entered. This card is scrollable, remains visible, and acts as a footer.
Important
This card has to be the last one in your view (after every card and pop-up). It can't be inside any stack.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
1_link | string | Required | The pop-up hash (e.g.'#kitchen') with ' ' or any link | A link to open |
1_name | string | Optional | Any string | A name for your button |
1_icon | string | Optional | Anymdi: icon | An icon for your button |
1_entity | string | Optional | Any light or light group | Display the color of that light in background |
1_pir_sensor | string | Optional | Any binary sensor | At least one pir sensor or more forauto_order, in fact it also works with any entity type, for example you can add light groups and the order will change based on the last changed states. |
auto_order | boolean | Optional | true orfalse (default) | Change the order of the buttons according to the_pir_sensor last changed time,it needs to befalse if you don't have any_pir_sensor in your code |
margin | string | Optional | Any CSS value | Use thisonly if yourhorizontal-buttons-stack is not well centered on mobile (e.g.13px) |
width_desktop | string | Optional | Any CSS value | Width on desktop (100% by default on mobile) |
is_sidebar_hidden | boolean | Optional | true orfalse (default) | Fix the horizontal buttons stack position if the sidebar is hidden on the desktop (only if you have made a modification to hide it yourself) |
rise_animation | boolean | Optional | true (default) orfalse | Set this tofalse to disable the animation that activates once the page has loaded |
highlight_current_view | boolean | Optional | true orfalse (default) | Highlight current hash / view with a smooth animation |
hide_gradient | boolean | Optional | true orfalse (default) | Set this tofalse to hide the gradient |
[!IMPORTANT]
The variables starting with a number define your buttons, just change this number to add more buttons (see example below).
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-horizontal-buttons-stack-border-radius | px | Border radius for horizontal button stack buttons |
--bubble-horizontal-buttons-stack-background-color | color | Background color for horizontal button stack buttons |
An horizontal buttons stack that reorganize itself based on occupancy sensors
type:custom:bubble-cardcard_type:horizontal-buttons-stackauto_order:true1_name:Living room1_icon:mdi:sofa1_link:'#living-room'1_entity:light.living_room1_pir_sensor:binary_sensor.living_room_motion2_name:Kitchen2_icon:mdi:fridge2_link:'#kitchen'2_entity:light.kitchen2_pir_sensor:binary_sensor.kitchen_motion3_name:Dining room3_icon:mdi:silverware-fork-knife3_link:'#dining-room'3_entity:light.dining_room3_pir_sensor:binary_sensor.dining_room_motion
This card is very versatile. It can be used as aswitch, aslider, astate or aname/text button.
Tip
Switch button: This is the default button type. By default, it toggles an entity and its background color changes based on the entity's state or the color of a light. You can change its action in theTap action on card section.
Slider button: This button type lets you control entities with adjustable ranges. It's ideal for dimming lights, and its fill color will adapt to the light's color. You can also use it to display values, such as a battery level.Supported entities for sliders:
- Light (brightness)
- Media player (volume)
- Cover (position)
- Fan (percentage)
- Climate (temperature)
- Input number and number (value)
- Battery sensor (percentage, read only)
You can also use any entity with a numeric state by disabling the entity filter inSlider settings, then define the
minandmaxvalues. This option is read only.State button: Perfect for displaying information from a sensor or any entity. When you press it, it will show the "More info" panel of the entity. Its background color does not change.
Name/Text button: The only button type that doesn't need an entity. It allows you to display a short text, a name or a title. You can also add actions to it. Its background color does not change.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
entity | string | Required | Any entity | An entity to control |
button_type | string | Optional | switch (default),slider,state orname | The behavior of your button |
name | string | Optional | Any string | A name for your button, if not defined it will display the entity name |
icon | string | Optional | Anymdi: icon | An icon for your button, if not defined it will display the entity icon or theentity-picture |
force_icon | boolean | Optional | true orfalse (default) | Give the priority to the icon instead of theentity-picture |
use_accent_color | boolean | Optional (false default) | For lights only. Use the theme's accent color instead of the light's color. | |
show_state | boolean | Optional | true orfalse (default) | Show or hide the state of yourentity |
show_name | boolean | Optional | true (default) orfalse | Show or hide the name |
show_icon | boolean | Optional | true (default) orfalse | Show or hide the icon |
show_last_changed | boolean | Optional | true orfalse (default) | Show the last changed time of yourentity |
show_last_updated | boolean | Optional | true orfalse (default) | Show the last updated time of yourentity |
show_attribute | boolean | Optional | true orfalse (default) | Show an attribute of yourentity below itsname |
attribute | string | Optional (required ifshow_attribute is set totrue) | An attribute from yourentity | The attribute to show (e.g.brightness) |
scrolling_effect | boolean | Optional | true (default) orfalse | Allow text to scroll when the content exceeds the size of their container |
button_action | object | Optional | tap_action,double_tap_action orhold_action, see below | Allow to change the default actions on button click. |
tap_action | object | Optional | Seeactions | Define the type of action on icon click, if undefined,more-info will be used |
double_tap_action | object | Optional | Seeactions | Define the type of action on icon double click, if undefined,none will be used |
hold_action | object | Optional | Seeactions | Define the type of action on icon hold, if undefined,more-info will be used |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Add customized buttons fixed to the right |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-button-main-background-color | color | Main background color for supported elements in the button |
--bubble-button-border-radius | px | Border radius for the button |
--bubble-button-icon-border-radius | px | Border radius for the button icon container |
--bubble-button-icon-background-color | color | Background color for the button icon container |
--bubble-light-white-color | color | Replace the default white color of light buttons/sliders |
--bubble-light-color | color | Replace the color of light buttons/sliders (even RGB lights) |
--bubble-button-box-shadow | Seebox shadow | Box shadow for the button |
These options are only available whenbutton_type is set toslider.
Slider options (YAML + descriptions)
| Name | Type | Requirement | Description |
|---|---|---|---|
min_value | number | Optional | The minimum value of the slider. For custom sliders. |
max_value | number | Optional | The maximum value of the slider. For custom sliders. |
step | number | Optional | The step value of the slider. |
tap_to_slide | boolean | Optional (false default) | Enable the previous slider behavior where you tap to activate the slider, instead of holding it. |
relative_slide | boolean | Optional (false default ) | Update value relative to the starting value, rather than the starting touch point. |
read_only_slider | boolean | Optional (false default) | Make the slider read-only. Automatically enabled for some entities like sensors. |
slider_live_update | boolean | Optional (false default) | The entity state is updated while sliding.This feature is not recommended for all entities. |
slider_fill_orientation | string | Optional | left (default),right,top,bottom |
slider_value_position | string | Optional | right (default),left,center,hidden |
invert_slider_value | boolean | Optional (false default) | Invert slider direction (100% fill equals minimum). Not available for color sliders. |
light_slider_type | string | Optional | brightness (default),hue,saturation,white_temp |
hue_force_saturation | boolean | Optional (false default) | For lights only (Hue mode). Force saturation when adjusting Hue |
hue_force_saturation_value | number | Optional (100 default) | For lights only (Hue mode). Forced saturation value (0-100) |
use_accent_color | boolean | Optional (false default) | For lights only (Brightness mode). Use the theme accent color instead of the light color |
allow_light_slider_to_0 | boolean | Optional (false default) | For lights only. Allows the slider to reach 0%, which turns off the light. Not available withtap_to_slide. |
light_transition | boolean | Optional (false default) | For lights only. Enable smooth brightness transitions for supported lights. |
light_transition_time | number | Optional (500 default) | For lights only. The transition time in milliseconds. Requireslight_transition: true. |
A slider button that can control the brightness of a light
type:custom:bubble-cardcard_type:buttonbutton_type:sliderentity:light.kitchen_ledname:Kitchen LEDicon:mdi:led-strip-variant
A button with more options
type:custom:bubble-cardcard_type:buttonentity:light.your_lightbutton_type:switchshow_icon:trueforce_icon:trueshow_name:trueshow_last_changed:trueshow_state:trueshow_last_updated:trueshow_attribute:trueattribute:brightnessscrolling_effect:truecard_layout:largebutton_action:tap_action:action:toggletap_action:action:more-infosub_button: -entity:light.your_lighticon:''show_state:falseshow_attribute:trueattribute:brightnessshow_icon:falseshow_background:falseshow_name:false
This card allows you to control a media player entity.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
entity | string | Required | Any media player | The media player to control |
name | string | Optional | Any string | A name for your media player, if not defined it will display the entity name |
icon | string | Optional | Anymdi: icon | An icon for your media player, if not defined it will display the entity icon or theentity-picture |
force_icon | boolean | Optional | true orfalse (default) | Give the priority to the icon instead of theentity-picture |
show_state | boolean | Optional | true orfalse (default) | Show or hide the state of yourentity |
show_name | boolean | Optional | true (default) orfalse | Show or hide the name |
show_icon | boolean | Optional | true (default) orfalse | Show or hide the icon |
show_last_changed | boolean | Optional | true orfalse (default) | Show the last changed time of yourentity |
show_last_updated | boolean | Optional | true orfalse (default) | Show the last updated time of yourentity |
show_attribute | boolean | Optional | true orfalse (default) | Show an attribute of yourentity below itsname |
attribute | string | Optional (required ifshow_attribute is set totrue) | An attribute from yourentity | The attribute to show (e.g.brightness) |
scrolling_effect | boolean | Optional | true (default) orfalse | Allow text to scroll when the content exceeds the size of their container |
min_volume | number | Optional | Any number | The minimum value of the volume slider. |
max_volume | number | Optional | Any number | The maximum value of the volume slider. |
cover_background | boolean | Optional | true orfalse (default) | Use a blurred media cover as the card background. |
button_action | object | Optional | tap_action,double_tap_action orhold_action, seeactions | Allow to change the default actions on button click. |
tap_action | object | Optional | Seeactions | Define the type of action on icon click, if undefined,more-info will be used. |
double_tap_action | object | Optional | Seeactions | Define the type of action on icon double click, if undefined,none will be used. |
hold_action | object | Optional | Seeactions | Define the type of action on icon hold, if undefined,more-info will be used. |
main_buttons_position | string | Optional | default orbottom | Move the cover action buttons to the bottom (fixed) |
main_buttons_full_width | boolean | Optional | true orfalse | Make the bottom action buttons full width (default:true when position isbottom) |
main_buttons_alignment | string | Optional | end (default),center,start,space-between | Alignment of bottom action buttons when not full width |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Add customized buttons fixed to the right |
hide | object | Optional | See below | Hide buttons from the card |
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
play_pause_button | boolean | Optional | true orfalse (default) | Hide the play/pause button |
volume_button | boolean | Optional | true orfalse (default) | Hide the volume button |
previous_button | boolean | Optional | true orfalse (default) | Hide the previous button |
next_button | boolean | Optional | true orfalse (default) | Hide the next button |
power_button | boolean | Optional | true orfalse (default) | Hide the power button |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-media-player-main-background-color | color | Main background color for the media player |
--bubble-media-player-border-radius | px | Border radius for the media player |
--bubble-media-player-buttons-border-radius | px | Border radius for the media player buttons |
--bubble-media-player-slider-background-color | color | Background color for the volume slider |
--bubble-media-player-icon-border-radius | px | Border radius for the media player icon container |
--bubble-media-player-icon-background-color | color | Background color for the media player icon container |
--bubble-media-player-box-shadow | Seebox shadow | Box shadow for the media player |
A media player with all the options
type:custom:bubble-cardcard_type:media-playername:Media playerentity:media_player.your_media_playershow_state:trueshow_last_updated:trueshow_attribute:trueattribute:assumed_statecard_layout:largescrolling_effect:falseshow_icon:falseforce_icon:trueshow_name:falseshow_last_changed:truecolumns:2rows:1min_volume:10max_volume:80cover_background:truetap_action:action:togglehide:play_pause_button:truevolume_button:trueprevious_button:truenext_button:truepower_button:truesub_button: -entity:media_player.salon_2icon:mdi:volume-highname:Volume leveltap_action:action:more-infoshow_name:falseshow_state:falseshow_last_updated:falseshow_attribute:trueshow_background:falseattribute:volume_level
This card allows you to control yourcover entities.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
entity | string | Required | Any cover | A cover to control |
name | string | Optional | Any string | A name for your cover, if not defined it will display the entity name |
force_icon | boolean | Optional | true orfalse (default) | Give the priority to the icon instead of theentity-picture |
show_state | boolean | Optional | true orfalse (default) | Show or hide the state of yourentity |
show_name | boolean | Optional | true (default) orfalse | Show or hide the name |
show_icon | boolean | Optional | true (default) orfalse | Show or hide the icon |
show_last_changed | boolean | Optional | true orfalse (default) | Show the last changed time of yourentity |
show_last_updated | boolean | Optional | true orfalse (default) | Show the last updated time of yourentity |
show_attribute | boolean | Optional | true orfalse (default) | Show an attribute of yourentity below itsname |
attribute | string | Optional (required ifshow_attribute is set totrue) | An attribute from yourentity | The attribute to show (e.g.brightness) |
scrolling_effect | boolean | Optional | true (default) orfalse | Allow text to scroll when the content exceeds the size of their container |
icon_open | string | Optional | Anymdi: icon | An icon for your open cover, if not defined it will display the default open cover icon |
icon_close | string | Optional | Anymdi: icon | An icon for your closed cover, if not defined it will display the default closed cover icon |
icon_up | string | Optional | Anymdi: icon | An icon for your open cover button, if not defined it will display the default open cover icon |
icon_down | string | Optional | Anymdi: icon | An icon for your close cover button, if not defined it will display the default close cover icon |
open_service | string | Optional | Any service or script | A service to open your cover, default tocover.open_cover |
stop_service | string | Optional | Any service or script | A service to stop your cover, default tocover.stop_cover |
close_service | string | Optional | Any service or script | A service to close your cover, default tocover.close_cover |
button_action | object | Optional | tap_action,double_tap_action orhold_action, seeactions | Allow to change the default actions on button click. |
tap_action | object | Optional | Seeactions | Define the type of action on icon click, if undefined,more-info will be used. |
double_tap_action | object | Optional | Seeactions | Define the type of action on icon double click, if undefined,none will be used. |
hold_action | object | Optional | Seeactions | Define the type of action on icon hold, if undefined,more-info will be used. |
main_buttons_position | string | Optional | default orbottom | Move the media controls to the bottom (fixed) |
main_buttons_full_width | boolean | Optional | true orfalse | Make the bottom controls full width (default:true when position isbottom) |
main_buttons_alignment | string | Optional | end (default),center,start,space-between | Alignment of bottom controls when not full width |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Add customized buttons fixed to the right |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-cover-main-background-color | color | Main background color for supported elements in the cover card |
--bubble-cover-border-radius | px | Border radius for the cover card |
--bubble-cover-icon-border-radius | px | Border radius for the cover card icon container |
--bubble-cover-icon-background-color | color | Background color for the cover card icon container |
--bubble-cover-box-shadow | Seebox shadow | Box shadow for the cover card |
--bubble-button-box-shadow | Seebox shadow | Box shadow for buttons in the cover card |
A card that can control a roller shade
type:custom:bubble-cardcard_type:coverentity:cover.kitchenname:Kitchenicon_open:mdi:roller-shadeicon_close:mdi:roller-shade-closed
This card allows you to add a dropdown menu for yourinput_select /select entities. This card also supports the sub-buttons and all the common Bubble Card features.
Tip
You can also have select sub-buttons if you want, this feature is available in all the cards that support the sub-buttons.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
entity | string | Required | Any entity | An entity to control |
name | string | Optional | Any string | A name for your select, if not defined it will display the entity name |
icon | string | Optional | Anymdi: icon | An icon for your select, if not defined it will display the entity icon or theentity-picture |
force_icon | boolean | Optional | true orfalse (default) | Give the priority to the icon instead of theentity-picture |
show_state | boolean | Optional | true orfalse (default) | Show or hide the state of yourentity |
show_name | boolean | Optional | true (default) orfalse | Show or hide the name |
show_icon | boolean | Optional | true (default) orfalse | Show or hide the icon |
show_last_changed | boolean | Optional | true orfalse (default) | Show the last changed time of yourentity |
show_last_updated | boolean | Optional | true orfalse (default) | Show the last updated time of yourentity |
show_attribute | boolean | Optional | true orfalse (default) | Show an attribute of yourentity below itsname |
attribute | string | Optional (required ifshow_attribute is set totrue) | An attribute from yourentity | The attribute to show (e.g.brightness) |
scrolling_effect | boolean | Optional | true (default) orfalse | Allow text to scroll when the content exceeds the size of their container |
tap_action | object | Optional | Seeactions | Define the type of action on icon click, if undefined,more-info will be used. |
double_tap_action | object | Optional | Seeactions | Define the type of action on icon double click, if undefined,none will be used. |
hold_action | object | Optional | Seeactions | Define the type of action on icon hold, if undefined,more-info will be used. |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Add customized buttons fixed to the right |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-select-main-background-color | color | Main background color for supported elements in the select card |
--bubble-select-background-color | color | Background color for select card |
--bubble-select-list-border-radius | px | Border radius for the dropdown menu in the card |
--bubble-select-list-item-accent-color | color | Accent color for the selected item |
--bubble-select-list-background-color | color | Background color for the dropdown menu in the card |
--bubble-select-list-width | px | Width of the dropdown menu in the card |
--bubble-select-arrow-background-color | color | Background color for dropdown arrow |
--bubble-select-button-border-radius | px | Border radius for select button |
--bubble-select-border-radius | px | Border radius for the select card |
--bubble-select-icon-border-radius | px | Border radius for the select card icon container |
--bubble-select-icon-background-color | color | Background color for the select card icon container |
--bubble-select-box-shadow | Seebox shadow | Box shadow for the select card |
A select card with a list of scenes
type:custom:bubble-cardcard_type:selectname:Sceneentity:input_select.scenesicon:mdi:brightness-4show_state:true
This card allows you to control yourclimate entities.
Tip
The mode selection menu is asub-button that is added automatically when creating the card. You can then modify or remove it as you wish.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
entity | string | Required | Climate entity | The entity to control (e.g.,climate.living_room). |
name | string | Optional | Any string | A custom name for the card. If not defined, it will display the entity name. |
icon | string | Optional | Anymdi: icon | A custom icon for the card. If not defined, the entity icon orentity-picture will be used. |
force_icon | boolean | Optional | true orfalse (default) | Gives priority to the icon over theentity-picture. |
show_state | boolean | Optional | true orfalse (default) | Show or hide the current state of theentity. |
show_name | boolean | Optional | true (default) orfalse | Show or hide the name of the entity. |
show_icon | boolean | Optional | true (default) orfalse | Show or hide the icon. |
hide_target_temp_low | boolean | Optional (only for entities supportingtarget_temp_low) | true orfalse (default) | Hides the low target temperature control if supported by theentity. |
hide_target_temp_high | boolean | Optional (only for entities supportingtarget_temp_high) | true orfalse (default) | Hides the high target temperature control if supported by theentity. |
state_color | boolean | Optional | true orfalse (default) | Applies a constant background color when the climate entity is ON. |
step | number | Optional | Any number | The temperature step. |
min_temp | number | Optional | Any number | The minimum temperature. |
max_temp | number | Optional | Any number | The maximum temperature. |
button_action | object | Optional | tap_action,double_tap_action orhold_action, seeactions | Allow to change the default actions on button click. |
tap_action | object | Optional | Seeactions | Define the type of action on icon click, if undefined,more-info will be used. |
double_tap_action | object | Optional | Seeactions | Define the type of action on icon double click, if undefined,none will be used. |
hold_action | object | Optional | Seeactions | Define the type of action on icon hold, if undefined,more-info will be used. |
main_buttons_position | string | Optional | default orbottom | Move the climate action buttons to the bottom (fixed) |
main_buttons_full_width | boolean | Optional | true orfalse | Make the bottom action buttons full width (default:true when position isbottom) |
main_buttons_alignment | string | Optional | end (default),center,start,space-between | Alignment of bottom action buttons when not full width |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Adds custom buttons fixed to the right. Useful for a climate mode select menu. |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-climate-main-background-color | color | Main background color for supported elements in the climate card |
--bubble-climate-border-radius | px | Border radius for supported elements in the climate card elements |
--bubble-climate-button-background-color | color | Background color for the climate card buttons |
--bubble-climate-icon-border-radius | px | Border radius for the climate card icon container |
--bubble-state-climate-fan-only-color | color | Overlay color for the fan-only state |
--bubble-state-climate-dry-color | color | Overlay color for the dry state |
--bubble-state-climate-cool-color | color | Overlay color for the cool state |
--bubble-state-climate-heat-color | color | Overlay color for the heat state |
--bubble-state-climate-auto-color | color | Overlay color for the auto state |
--bubble-state-climate-heat-cool-color | color | Overlay color for the heat-cool state |
--bubble-climate-accent-color | color | Accent color for the climate card |
--bubble-climate-box-shadow | Seebox shadow | Box shadow for climate container. |
A climate card with an HVAC modes dropdown menu
type:custom:bubble-cardcard_type:climateentity:climate.test_climatesub_button: -name:HVAC modes menuselect_attribute:hvac_modesshow_arrow:falsestate_background:false
This card allows you to display your calendar entities. Its content is scrollable, so you can easily browse upcoming events.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
days | number | Optional | Any number (minimum: 1) | Number of calendar days to fetch events for, from now until the end of the Nth day (default: 7) |
entities | object | Required | A calendar entity object (see below) | The entity to control (e.g.,calendar.main_calendar). |
entities.entity | string | Required | A calendar entity | The calendar entity to display |
entities.color | string | Optional | A color | A custom color for the calendar chip. If not defined, an automatic color will be picked |
days | number | Optional | Any number (minimum: 1) | Number of calendar days to fetch events for, from now until the end of the Nth day (default: 7) |
limit | number | Optional | A number | The amont of events that will be displayed on the card |
show_end | boolean | Optional | true orfalse (default) | Show or hide the end time for events |
show_progress | boolean | Optional | true (default) orfalse | Show or hide the event progress bar |
scrolling_effect | boolean | Optional | true (default) orfalse | Allow text to scroll when the content exceeds the size of their container |
event_action | object | Optional | tap_action,double_tap_action orhold_action, seeactions | Allow to add actions on event click. |
tap_action | object | Optional | Seeactions | Define the type of action on day click, if undefined,none will be used. |
double_tap_action | object | Optional | Seeactions | Define the type of action on day double click, if undefined,none will be used. |
hold_action | object | Optional | Seeactions | Define the type of action on day hold, if undefined,none will be used. |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Add customized buttons fixed to the right |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-calendar-main-background-color | color | Main background color for supported elements in the calendar card |
--bubble-calendar-border-radius | px | Border radius for supported elements in the calendar card elements |
--bubble-calendar-height | px | Height for the calendar card |
A calendar card with a limited amount of events
type:custom:bubble-cardcard_type:calendarentities: -entity:calendar.main_calendarcolor:'#ffb010'limit:1
A calendar card with an end time and a progress bar
type:custom:bubble-cardcard_type:calendarentities: -entity:calendar.main_calendarcolor:'#ffb010'show_end:trueshow_progress:true
This card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations...
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
name | string | Optional but recommended | Any string | A name for your separator |
icon | string | Optional but recommended | Anymdi: icon | An icon for your separator |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
sub_button | object | Optional | Seesub-buttons | Add customized buttons fixed to the right |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-line-background-color | color | Background color for the line in the separator |
A separator/divider for a "Covers" section
type:custom:bubble-cardcard_type:separatorname:Coversicon:mdi:window-shutter
This card is here to fill an empty column. This is useful if you have ahorizontal-stack in your pop-up with only one card. Take a look at the bottom right corner of this screenshot to (not) see it.
This card has no options and doesn’t supportstyling, though it does support layout options for HA sections.
An empty column in an horizontal stack
type:horizontal-stackcards: -type:custom:bubble-cardcard_type:button... -type:custom:bubble-cardcard_type:empty-column
This card is dedicated to sub-buttons only. It’s perfect for menus, quick actions, informational chips, or a fixed footer at the bottom of the page.
Important
This card uses the new sub-buttons schema. Usesub_button.bottom to define your buttons. Thesub_button.main section is ignored.
Options (YAML + descriptions)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
sub_button | object | Required | Seesub-buttons | Define your sub-buttons using thebottom section |
hide_main_background | boolean | Optional | true orfalse (default) | Remove the card background |
footer_mode | boolean | Optional | true orfalse (default) | Fix the card at the bottom of the page |
footer_full_width | boolean | Optional | true orfalse (default) | Make the footer full width (100%) |
footer_width | number | Optional | Any number | Footer width in pixels whenfooter_full_width isfalse |
footer_bottom_offset | number | Optional | Any number | Distance from the bottom of the page in pixels (default:16) |
card_layout | string | Optional | normal (default if not in section view),large (default if in section view),large-2-rows,large-sub-buttons-grid | Styling layout of the card, seecard layouts |
rows | number | Optional | Any number | Number of rows (height) (e.g.2) |
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-footer-width | px | Footer width whenfooter_full_width isfalse |
--bubble-footer-bottom | px | Footer bottom offset |
--bubble-footer-box-shadow | seebox shadow | Box shadow for the footer container |
Chips like (like on the screenshot)
type:custom:bubble-cardcard_type:sub-buttonshide_main_background:truesub_button:main:[]bottom: -name:Chipsbuttons_layout:inlinegroup: -entity:person.quentinshow_name:truefill_width:false -entity:sensor.geraldine_presenceshow_name:truefill_width:false -entity:input_boolean.alarmefill_width:falsename:Alarmshow_name:truetap_action:action:toggle -entity:sensor.salle_de_bain_temperaturefill_width:falseshow_state:truestate_background:false -entity:input_select.testfill_width:falsesub_button_type:selectname:Sceneicon:mdi:weather-sunnyshow_state:truejustify_content:centerrows:0.941
A fixed footer menu
type:custom:bubble-cardcard_type:sub-buttonsfooter_mode:truefooter_full_width:truesub_button:bottom: -name:Homeicon:mdi:hometap_action:action:navigatenavigation_path:'#home' -name:Lightsicon:mdi:lightbulbtap_action:action:navigatenavigation_path:'#lights' -name:Settingsicon:mdi:cogtap_action:action:navigatenavigation_path:'#config'rows:0.941
In every card that supports that option, you can add sub-buttons to customize your cards even more. You can, for example, create a button that can control a vacuum, a weather card, or almost anything that you can come up with. These sub-buttons support the tap actions and most of the button options.
Sub-buttons now support three types:Default (button),Slider, andDropdown / Select. You can mix types in the same card, place sub-buttons at the top or bottom, and organize them into groups for more advanced layouts.
Sub-buttons structure (main / bottom + groups)
sub_button:main: -group: -entity:sensor.temperatureshow_state:trueshow_background:false -entity:sensor.humidityshow_state:trueshow_background:falsebuttons_layout:columnbottom: -group: -entity:light.living_room -entity:light.bedroombuttons_layout:inlinejustify_content:centermain_layout:inlinebottom_layout:rows
Notes:
mainandbottomare two independent sections. Bottom sub-buttons are fixed to the bottom of the card.main_layoutandbottom_layoutacceptinline(default) orrowsto stack groups vertically.- Groups are objects with a
grouparray and optionalbuttons_layout(inlineorcolumn). justify_contentis available forbottom groups only (start,center,end,fill).- When bottom sub-buttons are present, the card layout auto-switches to
largeunless you explicitly set another layout. - Legacy
sub_buttonarrays are still supported and treated as themainsection.
Options (YAML + description)
| Name | Type | Requirement | Supported options | Description |
|---|---|---|---|---|
entity | string | Optional | Any entity | An entity to control |
name | string | Optional | Any string | A name for your sub-button, if not defined it will display the entity name |
icon | string | Optional | Anymdi: icon | An icon for your sub-button, if not defined it will display the entity icon or entity picture |
force_icon | boolean | Optional | true orfalse (default) | Force the icon even if an entity picture is available |
sub_button_type | string | Optional | default,slider orselect | Choose the sub-button type |
show_background | boolean | Optional | true (default) orfalse | Show a background for your sub-button, it will change its color based on your entity state |
state_background | boolean | Optional | true (default) orfalse | Use the state color when the entity ison |
light_background | boolean | Optional | true (default) orfalse | Use the light color for the background when available |
show_state | boolean | Optional | true orfalse (default) | Show or hide the state of yourentity |
show_name | boolean | Optional | true orfalse (default) | Show or hide the name |
show_icon | boolean | Optional | true (default) orfalse | Show or hide the icon |
show_last_changed | boolean | Optional | true orfalse (default) | Show the last changed time of yourentity |
show_last_updated | boolean | Optional | true orfalse (default) | Show the last updated time of yourentity |
show_attribute | boolean | Optional | true orfalse (default) | Show an attribute of yourentity below itsname |
attribute | string | Optional (required ifshow_attribute is set totrue) | An attribute from yourentity | The attribute to show (e.g.brightness) |
select_attribute | string | Optional | An attribute list from yourentity (see supported options above) | This attribute list will open a dropdown if clicked (e.g.effect_list) |
show_arrow | boolean | Optional | true (default) orfalse | Show or hide the dropdown arrow for select sub-buttons |
scrolling_effect | boolean | Optional | true (default) orfalse | Allow text to scroll when the content exceeds the size of the container |
tap_action | object | Optional | Seeactions | Define the type of action on sub-button click, if undefined,more-info will be used. |
double_tap_action | object | Optional | Seeactions | Define the type of action on sub-button double click, if undefined,none will be used. |
hold_action | object | Optional | Seeactions | Define the type of action on sub-button hold, if undefined,more-info will be used. |
fill_width | boolean | Optional | true orfalse | Fill the available width (default:false for main,true for bottom) |
width | number or string | Optional | Any number or CSS length | Custom width (px for main section,% for bottom section by default) |
custom_height | number | Optional | Any number | Custom height in pixels |
content_layout | string | Optional | icon-left (default),icon-top,icon-bottom,icon-right | Icon placement inside the sub-button |
always_visible | boolean | Optional | true orfalse (default) | Slider only. Always show the slider instead of opening it on tap |
show_button_info | boolean | Optional | true orfalse (default) | Slider only. Show icon/name/state whenalways_visible is enabled |
visibility | object or list | Optional | Seeconditions | Show or hide the sub-button based on conditions |
hide_when_parent_unavailable | boolean | Optional | true orfalse (default) | Hide the sub-button if the parent card entity is unavailable |
Slider sub-button options (same as button sliders)
Slider sub-buttons support the same slider options as button sliders, including:min_value,max_value,step,tap_to_slide,relative_slide,read_only_slider,slider_live_update,slider_fill_orientation,slider_value_position,invert_slider_value,light_slider_type,hue_force_saturation,hue_force_saturation_value,use_accent_color,allow_light_slider_to_0,light_transition,light_transition_time.
CSS variables (seeStyling)
| Variable | Expected value | Description |
|---|---|---|
--bubble-sub-button-border-radius | px | Border radius for the sub-buttons |
--bubble-sub-button-background-color | color | Background color for the sub-buttons |
--bubble-sub-slider-border-radius | px | Border radius for slider sub-buttons |
--bubble-sub-slider-background-color | color | Background color for slider sub-buttons |
--bubble-sub-slider-height | px | Height for always-visible slider sub-buttons |
--bubble-sub-button-dark-text-color | color | Text color on bright sub-button backgrounds |
A button with some sub-buttons to make a vacuum card (like on the screenshot)
type:custom:bubble-cardcard_type:buttonbutton_type:switchname:Vacuumentity:vacuum.downstairsicon:mdi:robot-vacuumshow_state:trueshow_last_changed:truetap_action:action:more-infobutton_action:tap_action:action:more-infosub_button: -name:Batteryicon:mdi:batteryshow_name:falseshow_icon:trueshow_background:falseshow_attribute:trueattribute:battery_level -name:Return to dockicon:mdi:homeshow_background:falsetap_action:action:call-serviceservice:vacuum.return_to_basetarget:entity_id:vacuum.downstairs -name:Pauseicon:mdi:pauseshow_background:falsetap_action:action:call-serviceservice:vacuum.pausetarget:entity_id:vacuum.downstairs -name:Starticon:mdi:playtap_action:action:call-serviceservice:vacuum.starttarget:entity_id:vacuum.downstairsstyles:>- .bubble-button-card-container { /* Change the background color when the vacuum get an error (optional), more details in the styles template section */ background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important; } /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */ ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.downstairs'].attributes.battery_icon)}
A button slider with a sub-button that shows the brightness and one that toggle the light (like on the screenshot)
type:custom:bubble-cardcard_type:buttonbutton_type:slidername:Kitchenentity:light.kitchenicon:mdi:fridge-outlineshow_last_updated:truesub_button: -name:Brightnessicon:mdi:fridge-outlineshow_icon:falseshow_background:falseshow_attribute:trueattribute:brightness -name:Toggle buttonicon:mdi:lightbulbtap_action:action:toggle
A button that shows the inside and outside temperature with the weather for today and tomorrow (screenshot included)
Bad luck for me it's cloudy all the time but all the icons are changing based on the weather.
type:custom:bubble-cardcard_type:buttonbutton_type:stateentity:weather.openweathermapname:Weathershow_state:truecard_layout:large-2-rowssub_button: -name:Home temperatureicon:mdi:home-thermometer-outlineentity:sensor.home_temperatureshow_state:trueshow_icon:trueshow_background:false -name:Outside temperatureentity:sensor.outside_temperatureshow_state:trueshow_background:false -name:Todayentity:sensor.home_realfeel_temperature_max_0dshow_name:trueshow_state:truetap_action:action:more-info -name:Tomorrowentity:sensor.home_realfeel_temperature_max_1dshow_name:trueshow_state:trueshow_background:falsestyles:>- /* Change the third and fourth sub-button icon based on the forecast.condition attribute, more details in the styles template section */ ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[0]?.condition))} ${subButtonIcon[3].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[1]?.condition))}
Bubble Card fully supports the Home Assistant section view, you can change the card layout to make the card bigger and also change the number of columns or rows the card should occupy in your section view (only on the cards that support that option). These layouts are also supported in all other view types.
Available card layouts
| Layout | Description |
|---|---|
normal | The regular layout (not optimized for the section view) |
large | A larger layout that will resize to the selected rows in the section view (optimized for the section view) |
large-2-rows | A larger layout with 2 rows of sub-buttons that will resize to the selected rows in the section view (optimized for the section view) |
large-sub-buttons-grid | This layout will displays sub-buttons in a grid,rows must be set to at least2. |
A large button that shows energy statistics with 2 rows of sub-buttons (screenshot included)
type:custom:bubble-cardcard_type:buttonbutton_type:statecard_layout:large-2-rowsname:Energyentity:sensor.current_power_productionicon:mdi:home-lightning-bolt-outlineshow_state:truebutton_action:tap_action:action:navigatenavigation_path:'#energy'sub_button: -entity:sensor.electricity_countericon:mdi:countershow_background:falseshow_state:truetap_action:action:more-info -entity:sensor.today_s_energy_productionshow_state:trueshow_background:false -entity:sensor.average_daily_consumptionshow_background:falseshow_state:true -entity:sensor.this_week_productionshow_state:trueshow_background:falseicon:mdi:calendar-week
A large button with multiple rows with 12 sub-buttons
type:custom:bubble-cardcard_type:buttonbutton_type:stateentity:sun.suncard_layout:large-sub-buttons-gridgrid_options:rows:3sub_button: -entity:sun.sunicon:mdi:numeric-0 -entity:sun.sunicon:mdi:numeric-1 -entity:sun.sunicon:mdi:numeric-2 -entity:sun.sunicon:mdi:numeric-3 -entity:sun.sunicon:mdi:numeric-4 -entity:sun.sunicon:mdi:numeric-5 -entity:sun.sunicon:mdi:numeric-6 -entity:sun.sunicon:mdi:numeric-7 -entity:sun.sunicon:mdi:numeric-8 -entity:sun.sunicon:mdi:numeric-9 -entity:sun.sunicon:mdi:numeric-10 -entity:sun.sunicon:mdi:numeric-negative-1
You can also use Home Assistant default tap actions, double tap actions and hold actions on the cards that supports this option. For example, this allows you to display the “more info” window by holding a button icon or running a service when a sub-button is pressed.
Note: When adouble_tap_action is configured, the regulartap_action will have a delay of 200ms to allow detectionof a double tap. If this delay is undesirable, setdouble_tap_action tonone to disable double tap handling.
Options (YAML + description)
| Name | Type | Supported options | Description |
|---|---|---|---|
action | string | more-info,toggle,call-service,navigate,url,fire-dom-event,none | Action to perform |
target | object | Only works withcall-service. Follows thehome-assistant syntax | |
navigation_path | string | Any path of your dashboard | Path to navigate to (e.g.'#kitchen' for opening a pop-up) when action defined as navigate |
url_path | string | Any link | URL to open on click (e.g.https://www.google.com) when action isurl |
service | string | Any service | Service to call (e.g.media_player.media_play_pause) whenaction defined ascall-service |
data orservice_data | object | Any service data | Service data to include (e.g.entity_id: media_player.kitchen) whenaction defined ascall-service |
confirmation | object | Seeconfirmation | Display a confirmation pop-up (not a Bubble Card one), overrides the defaultconfirmation object |
A button to open a pop-up
type:custom:bubble-cardcard_type:buttonbutton_type:namename:Kitchenicon:mdi:fridgebutton_action:tap_action:action:navigatenavigation_path:'#kitchen'
You can add custom styles to modify the CSS of all cardswithout using card-mod in four ways:
In the editor, go to the card you want to modify, then navigate toStyling options > Custom styles & JS templates, and add your custom styles (check the tips and examples below).
In the editor (or inYAML), go to the card you want to modify, then navigate toModules, then create a new module (it will be available to all cards), or go to theModule Store to install any available Module (more details about modules can be foundbelow).
In atheme file by adding CSS variables in YAML (these are available in each card's documentation above). This allows for global modifications.
Example
Don't copy the
Bubble:line, this is the name of the theme you use. You also need to remove the--from the variables.You need to run the
frontend.reload_themesaction to refresh the theme after any modifications.Bubble:# Bubble Card variables testbubble-border-radius:"8px"bubble-main-background-color:"rgb(50,70,90)"bubble-secondary-background-color:"rgb(0,70,90)"bubble-pop-up-main-background-color:"rgba(200,200,200,0.5)"bubble-accent-color:"rgb(100,140,180)"bubble-icon-background-color:"rgb(50,80,100)"bubble-select-list-width:"200px"bubble-select-list-background-color:"rgb(100,140,180)"
In YAML by adding
styles: |followed by your custom styles (check the tips and examples below).
Tip
To understand which style classes can be modified, you can take a look at thesrc/cards folder in this repository. In each card folder, you will find a file namedstyles.css. These files contain all the applied styles. This allows for a lot more possibilities than CSS variables, but it needs to be added individually to each card.
You can also find a lot ofexamples from the community, or some from theHome Assistant forum by doing a bit of searching.
The Bubble theme for Home Assistant (like on the screenshots) can be foundhere.
A tutorial video is coming soon on myYouTube channel!
Important
Please note that you might have to add!important; to some CSS styles that are already defined (see examples below).
Tip
Sub-buttons can be targeted by name-based classes. For example, a sub-button named "My sub-button" can be styled with.my-sub-button. Slider sub-buttons also expose.bubble-sub-button-slider-1,.bubble-sub-button-slider-2, etc.
Changing the font size of any Bubble Card
styles:| * { font-size: 16px !important; }
Changing the background color of a single button in an horizontal buttons stack
styles:> /* Selector for the '#kitchen' button */ .kitchen > .bubble-background-color { background-color: blue !important; }
Changing the background color of a card
This one works on all Bubble Card types (except for the pop-ups):
styles:| ha-card { --bubble-main-background-color: rgba(12,120,50,0.5) !important; }
This one is doing the same in a button card only (it works for the pop-up header):
styles:| .bubble-button-card-container { background: rgba(12,120,50,0.5) !important; }
To change the color when it'son take a look at the style templates below.
Changing the color of a button slider
styles:| .bubble-range-fill { background: rgba(79, 69, 87, 1) !important; opacity: 1 !important; }
Changing the line color of a separator
styles:| .bubble-line { background: var(--primary-text-color); opacity: 0.1; }
Changing the color of an icon
styles:| .bubble-icon { color: white !important; }
For an horizontal buttons stack icon.
.kitchen > .bubble-icon {color:grey !important}
Changing the background color of an icon container
This one works on all Bubble Card types (except for the pop-ups):
styles:| ha-card { --bubble-icon-background-color: rgb(230, 128, 41) !important; }
This one is doing the same for the pop-up header:
styles:| .bubble-icon-container { background: rgb(230, 128, 41) !important; }
Changing the size of the sub-buttons (perfect for the large layout)
styles:| .bubble-sub-button { height: 48px !important; min-width: 48px !important; }
Changing the background color of the second sub-button
styles:| .bubble-sub-button-2 { background-color: blue !important; }
Changing the size of an icon
For the main icon.
styles:| .bubble-icon { --mdc-icon-size: 26px !important; }
For the sub-button icons.
styles:| .bubble-sub-button-icon { --mdc-icon-size: 26px !important; }
Using a picture rather than an icon in a sub button
sub_button: -icon:nonestyles:|- .bubble-sub-button-1 { background-image: url("/local/pictures/your_picture.jpg"); background-size: cover; }
Just upload this picture in a “pictures” folder (or the name you want) in the Home Assistant “www” folder.
Advanced example: Creating an horizontal row of sub-buttons (screenshot included)
I really love this one, I use it as a header on my dashboard.
type:custom:bubble-cardcard_type:buttoncard_layout:largebutton_type:nameshow_icon:falseshow_name:falsesub_button: -name:Muteicon:mdi:volume-offtap_action:action:toggleservice:input_boolean.toggleentity:input_boolean.silent_mode -name:Coversentity:cover.all_groupshow_background:falsetap_action:action:navigatenavigation_path:'#cover' -name:Shopping listicon:mdi:cart-outlineshow_background:falsetap_action:action:navigatenavigation_path:'#shopping-list' -name:Securityicon:mdi:video-outlineshow_background:falsetap_action:action:navigatenavigation_path:'#security' -name:Settingsicon:mdi:cogshow_background:falsetap_action:action:navigatenavigation_path:'#configuration'styles:| .card-content { width: 100%; margin: 0 !important; } .bubble-button-card-container { background: none; border: none; } .bubble-sub-button { height: 46px !important; width: 46px !important; } .bubble-sub-button-container { display: flex !important; width: 100%; justify-content: space-between !important; } .bubble-sub-button-icon { --mdc-icon-size: inherit !important; } .bubble-name-container { margin-right: 0px !important; }
Bubble Card doesn’t support Jinja templates but advanced users can add templates in JS directly in theircustom styles. For example, this allows you to dynamically change an icon, the texts or the colors of an element, to show or hide an element conditionally (like a sub-button), or almost anything based on a state, an attribute and more.
Tip
More information about JS templateshere. My advice is toalways take a look at your browser console to be sure that everything is working correctly.
Important
All templates that are not modifying a CSS property must be placed at the end! Like modifying an icon, a text or any element.
Variables
You have access to these variables in most cards:
statewill return the state of your definedentity.entitywill return your entity you defined likeswitch.testin this example.iconcan be used like this to change the iconicon.setAttribute("icon", "mdi:lightbulb").subButtonState[0]will return the state of your first sub-button definedentity,[0]is the first sub-button state,[1]the second...subButtonIcon[0]can be used like this to change the first sub-button iconsubButtonIcon[0].setAttribute("icon", "mdi:lightbulb"),[0]is the first sub-button icon,[1]the second...cardwill return the card element in the DOM.hassis an advanced variable that allows you even more control, for example you can return the state oflight.kitchenlike thishass.states['light.kitchen'].stateor an attribute like thishass.states[entity].attributes.brightness.thiswill return a lot of usefull informations about your setup and dashboard, only use this if you know what you are doing.
Functions
You have access to all the global JS functions, but you have also access to:
getWeatherIconcan be used to return a weather icon based on a state that return the weather. For example, you can can do this${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast[0]?.condition))}to change the third sub-button icon to today's weather icon,.forecast[1]?.conditionis for tomorrow...You will have to create a template sensor for that. Here is what you can add in your
configuration.yaml:-trigger: -platform:time_patternhours:/2action: -service:weather.get_forecastsdata:type:dailytarget:entity_id:weather.homeresponse_variable:dailysensor: -name:Weather Forecast Dailyunique_id:weather_forecast_dailystate:"{{ now().isoformat() }}"attributes:forecast:"{{ daily['weather.home'].forecast }}"
hass.formatEntityState(state)can be used to transtale a state (Can also be used to get a state unit, without the need to add it manually).hass.formatEntityAttributeValue(state, "attribute")can be used to translate an attribute (Can also be used to get a state unit, without the need to add it manually).
You can find a lot of examples below, but you can also find very advanced templates on myPatreon page, like 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!
Examples from my Patreon page
Adding Home Assistant like badges to any card
Showing formatted date and time in a separator without using any entity
Showing a sub-button state on two lines
Customizing labels and icons inside a select sub-button
Adding a persistent reminder pop-up that shows up only when needed
Changing the background color of a button that is red when it'soff and blue when it'son
type:custom:bubble-cardcard_type:buttonentity:switch.testname:Teststyles:| .bubble-button-background { opacity: 1 !important; background-color: ${state === 'on' ? 'blue' : 'red'} !important; }
Changing the background color of a button based on an entity for the horizontal buttons stack
styles:| .kitchen > .color-background { background-color: ${hass.states['light.kitchen'].state === 'on' ? 'blue' : 'red'} !important; }
Showing/Hiding a sub-button conditionally
This one is showing the first sub-button only when my vacuum is stuck.
styles:| .bubble-sub-button-1 { display: ${hass.states['vacuum.downstairs'].state === 'error' ? '' : 'none'} !important; }
This one is showing a sub-button when the battery is below 10%. Usefull with a sub-button that shows "Low battery".
styles:| .bubble-sub-button-1 { display: ${hass.states['vacuum.downstairs'].attributes.battery_level <= 10 ? '' : 'none'} !important; }
Changing an icon or sub-button icon conditionally
This one is changing a button icon only when a vacuum is stuck.
styles:| ${icon.setAttribute("icon", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}
This one is changing the first sub-button icon only when a vacuum is stuck.
styles:| ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}
Changing an icon or sub-button icon color conditionally
This one is changing a button icon color based on its state.
styles:| .bubble-icon { color: ${hass.states['light.your_light'].state === 'on' ? 'green' : 'red'} !important; }
This one is changing a sub-button icon color based on its state..bubble-sub-button-1 is the first sub-button, replace1 if you want to change another sub-button icon.
styles:| .bubble-sub-button-1 > ha-icon { color: ${hass.states['light.your_light'].state === 'on' ? 'green' : 'red'} !important; }
Animating a fan icon conditionally
This one is rotating a button icon when a fan ison.
styles:|- .bubble-icon { animation: ${hass.states['fan.you_fan'].state === 'on' ? 'slow-rotate 2s linear infinite' : ''}; } @keyframes slow-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Templating texts (like name or state)
This one is changing a button name/state with "It's currently sunny" depending on your weather.
styles:| ${card.querySelector('.bubble-name').innerText = "It's currently " + hass.states['weather.home'].state}
If you want to template the state (.bubble-state) don't toggleshow_state: true just toggleshow_attribute: true without any attribute.
Advanced example: Changing the color of a sub-button when a pop-up is open
styles:| ${window.addEventListener('location-changed', () => { card.querySelector('.bubble-sub-button-1').style.backgroundColor = this.location.href.includes('#kitchen') ? 'blue' : ''; })}
Advanced example: Templating a separator name based on a state translated to your language
You can usehass.formatEntityState(state) to transtale a state andhass.formatEntityAttributeValue(state, "attribute") to translate an attribute.
This one is changing the name and the icon based on the weather, "Nuageux" means "Cloudy" in French.
type:custom:bubble-cardcard_type:separatoricon:mdi:weather-cloudysub_button: -entity:sensor.outside_temperatureicon:mdi:thermometername:Temperatureshow_state:trueshow_background:falsestyles:> .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))}
Modules are a powerful feature that allows you to save, reuse, and share your custom styles and templates across all of your Bubble Cards. Instead of copying and pasting the same code into multiple cards, you can create a Module and apply it wherever you need it. This makes managing your dashboard's look and feel much easier and more efficient.
But this feature is so much more powerful than that, it lets you add actual features yourself in the Bubble Card editor, using all the defaultHome Assistant form options!
The object selector has been improved to show live changes and to support attributes correctly.
You can also browse theModule Store to find and installmodules created by the community, or share your own creations!
Tip
A Module's code works exactly the same way as the code in thestyles section of a card. All the same variables and functions from theTemplates section are available.
Important
Starting with v3.1.0, Bubble Card Tools is the recommended storage backend for modules. The legacy template sensor method still works for existing setups, but new modules and Module Store features are best supported via Bubble Card Tools.
The Bubble Card Tools integration enables the Module Editor and Module Store, and stores modules as individual YAML files. Existing modules are migrated automatically.
The installation and configuration steps are explained here:
You can access the Module Editor from any card's settings, under theModules section. The editor provides two main tabs:
This tab shows all your installed modules and allows you to:
- Apply existing modules to the current card
- Create a new module from scratch
- Edit existing modules with live preview
- Delete modules you no longer need
- Search andsort modules (alphabetical, recent, active first)
- Set global status to make a module apply to all cards automatically
- Import/Export modules for backup or sharing
This tab will displayall available modules from the community, and allows you to:
- Browse all community-created modules
- Search and filter modules by name, compatibility, or keywords
- Install modules with one click
- Update installed modules when new versions are available
Tip
In the editor, you can enable unsupported modules to test modules that aren’t yet marked as compatible with a given card type.
Click to expand
- Go to any card's editor and expand theModules section.
- Click onCreate new module.
- Fill in the module information.
- Write your CSS and/or JavaScript template code in theCode editor.
- (Optional) Create a custom configuration UI in theEditor section (like the color picker in the screenshot above, full documentation availablehere).
- ClickSave.
Your module is now available to be used on any of your cards!
Click to expand
Via the editor:
- Go to the editor of the card you want to apply the module to.
- Expand theModules section.
- Click on the module you want to apply from the list.
- Under "Apply to", click on "This card". The module is now active. You can apply multiple modules to the same card.
Via YAML:
type:custom:bubble-cardcard_type:buttonentity:light.examplemodules: -module_id_1 -module_id_2
Click to expand
You can set a module to apply automatically to all Bubble Cards:
This is not available for modules with an editor, as those require a specific configuration to work.
Via the editor:
- In the Module editor, find your module in theMy Modules tab.
- Toggle theAll cards button next to the module name.
- The module will now be applied to all cards automatically.
Via YAML:
In your module YAML configuration (in
bubble-modules.yaml), just addis_global: true.
Click to expand
If you have a global module but want to exclude it from a specific card:
Via the editor:
- In the card'sModules section, you'll see global modules listed.
- Click on a global module, disable "This card" to exclude it from this specific card.
Via YAML:
type:custom:bubble-cardcard_type:buttonentity:light.examplemodules: -!global_module_id# The ! prefix excludes this global module
Click to expand
To share your Module to the Module Store, in the Module Editor, at the bottom in "Export Module", click on "Copy for GitHub" and paste the content in a new discussion in theShare your Modules category.Edit the description (if needed),the example (for YAML users), and remember toinclude at least one screenshot for the Module Store.
Your Module becomes available right after that (after a Store refresh), so double-check that everything is correctly written and the Module is working as expected. You can of course edit/update the Module after it is shared.
Click to expand
The Module Store automatically checks for updates to installed modules. When updates are available:
- You'll see an update indicator in theModule Store tab.
- ClickUpdate in modules with available updates.
- Confirm the update in the Module Store.
Click to expand
Some modules may not be compatible with all card types. You can specify which cards a module support.
If you want a module to be compatible withall cards, simply omit thesupported field (or use theAll cards option in the editor).
my_module:name:"Button Only Module"supported: -buttoncode:| /* Your module code here */
Basic styling module
blue_cards:name:"Blue Cards Theme"version:"1.0"creator:"Your Name"description:"Makes all cards backgrounds blue"code:| ha-card { --bubble-main-background-color: #007acc; }
Module with custom configuration
This module is availablehere.
icon_container_color:name:'Example: Customize the icon container color'version:v1.2creator:Clooossupported: -calendar -pop-up -cover -button -media-player -climate -selectdescription:| A list of predefined colors to customize the icon container color. Configure this module via the editor or in YAML, for example: <br><br> <code-block><pre> icon_container_color: color: light-blue </pre></code-block>code:| .bubble-icon-container, .bubble-day-chip { opacity: 1 !important; --bubble-icon-background-color: var(--${this.config.icon_container_color?.color}-color) !important; }editor: -name:colorlabel:Colorselector:ui_color:include_none:true
More examples can be found in the Module Store, orhere.
Feel free to open an issue if something is not working as expected.
Got questions or thoughts about Bubble Card? Want to share your dashboards or discoveries? You can go on the Home Assistant forum, on the Bubble Card subreddit or on the GitHub Discussions section.
I dedicate most of my spare time to making this project the best it can be. So if you appreciate my work, any donation would be a great way to show your support 🍻
Thank you everyone for your support, you all are my greatest motivation!
About
Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.