That is how lovelace works. If you have 1 card on the line it will take the full width. 2 will take each half etc…
If you want to insert white space cards you can use that config in a horizontal-stack:
- type: custom:button-card
color_type: blank-card
I have now read almost all the thread but not found any solution.
I am looking to embed in a single button multiple icons.
Button represents a motion and switch controlled light with a quite complicated logic behind.
I need to represent the state of the light (on off) at the center . So far pretty normal
In lower left corner I would like to represent the status of the connected motion sensor. Ideally with a graphical progress indicator. The progress is given by a node red timeout node and is available as a sensor in Home Assistant.
in lower right I I would like to represent the status of the connected switch. Ideally with a graphical progress indicator. The progress is given by a node red timeout node and is available as a sensor in Home Assistant.
Upper right icon with current brightness in the room (motion sensor has a luminance sensor too and light can trigger based on configurable luminance threshold, think about Hue sensor setup)
Holding on the button would popup a window with some related parameters (timeframe, weekdays to use, light sensor threshold…)
As said I would have ideally done it in one button but I am close to giving up and having this in a 3x3 Horizontal & vertical stack.
Any clue / suggestion?
I was thinking of using a 3x3 grid and a few icon items on it . First trouble is that they are linked to different entities. Second that they should be dynamically updated
browser_mod and custom_fields
Yes I was going along the path of browser mod for popups.
So custom_fields is the other track.
I will search for it in the thread.
Can You point me to some link?
Look at the GitHub docs. You can have button-cards inside of button-cards.
Is there a possibility to change the location of the lock icon? I tend to use the upper right corner for other information.
See docs. Just need to change CSS. Refer below…
styles:
lock:
- justify-content: flex-end
- align-items: flex-end
Hi there,
I have a card with a graph. When its placed on the end of other cards everything is fine. But when it’s placed before (horizontal stack) another card it overlaps that card:
Fine: 
Overlaped: 
Is there something wrong with my card config? Thanks
type: 'custom:button-card'
aspect_ratio: 1/1
custom_fields:
graph:
card:
name: Keller
type: sensor
entity: sensor.temperature_10
graph: line
styles:
custom_fields:
graph:
- width: 150px
- height: 150px
- overflow: visible
card:
- height: 150px
- width: 150px
grid:
- grid-template-areas: '"graph"'
Try without setting the width and the height on the card itself. This is incompatible with aspect_ratio
Thanks, but then I run in another issue:
Without width and height it looks like this:
And without aspect_ratio it looks like this:
Without both:
Cant get a clean square. :\
Thx, I completely missed that !
Hi,
This is exactly what I am looking for! Any idea how to make it line up nicely with ?
As you can see, the labels are a bit shifted upwards.
This is the code from the most left button:
default:
variables:
state_on: "on"
state_off: "off"
opacity_off: 0.5
color: auto
size: 25%
aspect_ratio: 1/1
show_name: true
show_icon: true
show_state: true
show_label: true
show_entity_picture: false
show_last_changed: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: heavy
styles:
id: styles
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-rows: 1fr min-content min-content min-content
- grid-template-columns: 1fr
card:
- border-radius: 10px
- box-shadow: 5
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- font-weight: bold
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- padding-left: 10px
entity_picture:
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
custom_fields:
vermogen:
- align-self: start
- justify-self: end
- padding-right: 10px
- font-size: 11px
- font-family: Helvetica
- font-weight: bold
- color: red
state:
- value: "unavailable"
id: state_unavailable
styles:
card:
- opacity: 0.2
icon:
- color: var(--paper-item-icon-color)
name:
- color: var(--primary-text-color)
state:
- color: hsl(0, 100%, 50%)
label:
- color: var(--primary-text-color)
lock:
- color: var(--paper-item-icon-color)
- value: "[[[ return variables.state_on ]]]"
spin: false
id: state_on
styles:
card:
- --ha-card-background: white
- opacity: 1.0
- box-shadow: red
name:
- color: black
state:
- color: black
lock:
- color: gray
label:
- color: gray
- value: "[[[ return variables.state_off ]]]"
spin: false
id: state_off
styles:
card:
- opacity: "[[[ return variables.opacity_off ]]]"
icon:
- color: var(--paper-item-icon-color)
name:
- color: var(--primary-text-color)
state:
- color: var(--primary-text-color)
label:
- color: var(--primary-text-color)
lock:
- color: var(--paper-item-icon-color)
And the right button:
type: custom:button-card
template: default
entity: "{{ entity }}"
show_last_changed: false
custom_fields:
t:
card:
type: custom:button-card
name: Timer
entity: "{{timer}}"
show_name: false
show_icon: false
show_state: true
styles:
card:
- font-size: 12px
state:
- color: >
[[[
if (states['{{timer}}'].state == 'idle')
return "var(--paper-item-icon-color)";
else
return "red";
]]]
style: |
.t { padding: 0px; }
.flex { padding: 0px; }
styles:
id: styles
grid:
- grid-template-areas: '"i" "n" "s" "t"'
- grid-template-rows: 1fr min-content min-content min-content
- grid-template-columns: 1fr
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: selection
Cannot get it done.
Could you post just one working example!
One big icon one smaller in a corner both updating .
Then I will go from there .
Tx
Anyone have an idea how I can get the dynamic color from the entity?
The attribute.rgb_color is working for the icon I use to update the strike color dynamically. But I want to try to set the card background dynamic when on. But I can not get the color. Hope someone can help.
type: 'custom:button-card'
aspect_ratio: 1/1
show_state: true
show_icon: false
state:
- value: 'on'
styles:
card:
- background-color:
- 'rgb( ${entity.attributes.rgb_color} )'
Is anything wrong with the label_template option? It doesnt work in any case for me. Here is an example. Maybe someone of you can test it in another setup. Thx!
type: 'custom:button-card'
color_type: icon
entity: light.wozibeistelllampe
label_template: >
var bri = states['light.wozibeistelllampe'].attributes.brightness;
return 'Brightness: ' + (bri ? bri : '0') + '%';
show_label: true
show_state: true
size: 10%
It’s just label, not label_template. Also please check the documentation on github, this has been deprecated for quite some time now a’d the template format has changed.
You can use color_type: card if you want to color the background with the light color.
seeing this lately on unexpected moments:
frontend_latest/app.267b6bce.js:846:247005 SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds
and
local/lovelace/resources/button-card/button-card.js?v=3.4.0:898:92 SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds
2020-10-28 01:16:14 ERROR (MainThread) [frontend.js.latest.202010213] https://redacted/local/lovelace/resources/button-card/button-card.js?v=3.4.0:898:92 SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds
2020-10-28 01:16:17 ERROR (MainThread) [frontend.js.latest.202010213] https://redacted/local/lovelace/resources/button-card/button-card.js?v=3.4.0:898:92 SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds
2020-10-28 01:16:18 ERROR (MainThread) [frontend.js.latest.202010213] https://redacted/local/lovelace/resources/button-card/button-card.js?v=3.4.0:898:92 SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds
2020-10-28 01:16:21 ERROR (MainThread) [frontend.js.latest.202010213] https://redacted/local/lovelace/resources/button-card/button-card.js?v=3.4.0:898:92 SecurityError: Attempt to use history.pushState() more than 100 times per 30 seconds
and when it happens it floods…(some 600-1000 times)
not really much else to go on (didnt set anything to debug, if that’s even possible)
how can be find out which button is causing that…
I have one suspect, though, if you think of it, it behaves as expected. I ll explain.
this is a counter
- type: custom:button-card
entity: group.all_inside_lights
template: button_title_counter
triggers_update: input_boolean.run_lights_summary
label: >
[[[
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state == 'on') {count += 1;}
}
if (count == entities.length) return 'All ' + entities.length + ' lights on';
if (count == 0) return 'No lights on';
return 'Lights on: ' + count + ' of ' + entities.length;
]]]
that counted the individual lights in the entity, group.all_inside_lights.
I have changed that group, to contain other groups with lights, so it now only counts those groups, if they are ‘on’. I dont see any other errors the JS is incorrect, so maybe this isnt the culprit after all. Havrmnt change any of my JS in the buttons though.
Hope you recognize the error and could explain what’s happening.
thanks
The only way this is happening is when you call a “navigate” action and it loops indefinitely. I’d be looking into your menu if there are no issues with it 
(I’ll look on my side too if the code doesn’t do something weird but it’s a pretty standard part)
what menu is that? I really havent got a clue just yet, what might cause this
wait. you mean my menu short cut bar? yeah, that would be a candidate… 
I’ll have a second and third look!