That’s a bug, please open a github issue. Thanks
I can’t change that, that’s how it works in HA core, you have to put an equal number of blank cards or use lovelace-layout-card, or maybe use a vertical-stack-in-card with 4 buttons inside
Can you force the icon using icon: mdi:your_icon please? If it displays by forcing the icon, it means your entity doesn’t have an icon (or the button can’t find it)
Button click only «ON»?
I have a group of buttons, that I like to behave like a radio-button-list. If I press one button, the others go “off”. When I press another button “on” in the group, the other goes “off”. I have the above functionality working with an automation.
But if I press the button that is “on” to “off” my radio-button-functionality breaks, - the pressed button goes “off”. And all other buttons are “off”.
I have a second automation setting the Home-button to “on” in this case, but its not perfect. The best would be that the buttons only could be set to “on” (other functionality/automation could then set the buttons to “off”).
Is it possible to configure a button to only be set to “on” in the GUI?
UPDATE:
#######################################################################
# HA MODE SET
#######################################################################
- alias: HA Mode set
initial_state: true
trigger:
platform: state
entity_id: input_boolean.ha_mode_home,
input_boolean.ha_mode_away,
input_boolean.ha_mode_holiday,
input_boolean.ha_mode_night
to: 'on'
action:
- service: input_boolean.turn_off
data_template:
entity_id: >
{% set booleans = [ 'input_boolean.ha_mode_home', 'input_boolean.ha_mode_away', 'input_boolean.ha_mode_holiday', 'input_boolean.ha_mode_night' ] | reject('equalto', trigger.entity_id) %}
{{ booleans | list | join(', ') }}
- alias: HA Mode default
initial_state: true
trigger:
platform: template
value_template: "{% if is_state('input_boolean.ha_mode_home', 'off') and is_state('input_boolean.ha_mode_away', 'off') and is_state('input_boolean.ha_mode_holiday', 'off') and is_state('input_boolean.ha_mode_night', 'off')%}true{% endif %}"
action:
- service: input_boolean.turn_on
data_template:
entity_id: input_boolean.ha_mode_homeUse a script on top of your automation and call that script from the button.
The script would test if the button is on, and do nothing if on, else if would turn it off and your automation would kick in.
ok, consider that done.
won’t that disrupt the aspect_ratio of the other cards then? I can of course set a fixed size for all the buttons, but recently rebuilt all to use aspect_ratio, without which this button setup is less than optimal across different platforms.
Please consider the ‘grid’ request as a future update? marking a button to take spot 2to5 from the row (in this case) would be way preferable to using yet more custom cards.
No, it won’t show:
- type: 'custom:button-card'
template: button_default_state
name_template: >
if (states['sensor.spots_badge'].state !== 0) return 'Ceiling spots on: ' + states['sensor.spots_badge'].state;
return 'Ceiling spots';
entity: group.all_living_ceiling_spots
icon: mdi:spotlight-beam
show_state: false
show_label: false
show_icon: true
show_name: true
aspect_ratio: 16/1
layout: icon_name
styles:
card:
- border-radius: 12px
- border: solid 1px
- font-size: 20px
- font-weight: bold
Also, the text should be displayed in the middle of the button…
Like the test button above it now does.
it does have an icon for sure:
and again, see my other (Tiles) setup to be proof of that:
or the unformatted button:
that’s what I am looking for: icon_name_state or icon_name (and use the template for name)
I think it has to do with the size. I had left that out in the card, seems to have minimized to less than a pixel… though of course plenty of space.
Ive added size: 70% and this shows:
that is using aspect_ratio of 4/1 for the button. Which is still 3 times to high (need 12/1), so lowering that to 8/1 and increasing the icon size to 90%:
and there it goes!
12/1 and it is invisible (no matter why size is set, even tried 120% )
EDITED:
Do you by any chance have a code example?
UPDATE:
This works, but its maybe better to stop the button process at all (instead of running the button “on” logic once more). But I have no clue how to do the button script logic to stop the button. Help please.
- alias: HA Mode default
initial_state: true
trigger:
platform: template
value_template: "{% if is_state('input_boolean.ha_mode_home', 'off') and is_state('input_boolean.ha_mode_away', 'off') and is_state('input_boolean.ha_mode_holiday', 'off') and is_state('input_boolean.ha_mode_night', 'off')%}true{% endif %}"
action:
- service: input_boolean.turn_on
data_template:
entity_id: "{{ trigger.entity_id }}"
As I said, I can’t that’s how HA core works with cards and button-card is a card (tiles, is 1 card whatever the number of button inside is). I would have to build another card to achieve that purpose.
In the meantime, you can use label_template instead of name_template.
I’ll have a look, but I don’t have time until next week
No it souldn’t, because the icon “column” occupies 40% of the width of the button.
script:
keep_on:
sequence:
- condition: state
entity_id: {{ entity }}
state: 'off'
- service: homeassistant.turn_on
data:
entity_id: {{ entity }}
And then call it like this from each of your buttons:
tap_action:
action: call-service
service: script.keep_on
service_data:
entity: YOUR_ENTITY_ID
I expect your automation already in place will turn all the others off 
Trying to stop a button click with script, so an automation is not run if condition in the script is true.
Not getting it to work. Anny ideas?
Button:
color_type: card
entity: input_boolean.ha_mode_home
icon: 'mdi:home-account'
name: Home
show_state: true
styles:
card:
- width: 100px
- height: 100px
- border-radius: 15px
- '-- paper-card-background-color': 'rgba(0, 100, 04, 0.2)'
action: call-service
service_data:
entity_id: script.button_stopp_off
type: 'custom:button-card'
Scripr:
button_stopp_off:
alias: Button stopp off
sequence:
- service_template: >
{% if is_state('trigger.entity_id', 'off') %}
homeassistant.turn_off
{% endif %}
entity_id: automation.ha_mode_setcombine the shadows, the original shadow for a card is:
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
so just add your color to it and reorganize the order for whatever you want on top.
- box-shadow: 0px 0px 1px 1px var(--paper-item-icon-active-color), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
I know people have asked for this so I finally got my configuration up on github. I don’t remember who was asking exactly aside from a few users. @apop @myle. It’s a work in progress, still managing many changes that I want to add. Also having issues displaying the images on the in the README.md
thanks, seems rather more complex than you describe it 
will test soon.
in the meantime please help me getting the icon and label to concatenate more. I am a bit lost what grid to set for that…managed to get it all on 1 line using a label_template, (which of course is a bit of a hack, but no other way because in the button card settings label and state or name and label won’t ever be concatenated:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: 'custom:button-card'
# color_type: label-card
# color: auto
# name: Hallway lights
entity: group.all_hallway_lights
aspect_ratio: 12/1
# https://community.home-assistant.io/t/lovelace-button-card/65981/1116?u=mariusthvdb
label_template: >
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
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 === 0 || count === entities.length ) return 'Hallway lights: ' + capitalizeFirstLetter(entity.state) +': All ' + entities.length.toString();
return 'Hallway lights: ' + capitalizeFirstLetter(entity.state) +': ' + count.toString() + ' of ' + entities.length.toString();
# if (count > 0) return count.toString() + ' of ' + entities.length.toString() + ' hallway and ambient lights';
# return 'Hallway and ambient lights';
layout: icon_label
show_icon: true
# color: auto
size: 40%
show_state: false
show_name: false
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding: 4px # 0px
- border-radius: 12px
- background-color: rgb(255, 251, 239)
label:
- color: gray
- font-size: 13px
- font-weight: bold
- font-family: Helvetica
# - padding: 0px 5px
# - justify-self: start
# state:
# - font-size: 13px
# - font-family: Helvetica
# # - padding: 0px 10px
# # - justify-self: start
# - text-transform: capitalize
# # - font-weight: bold
# # - padding-left: 10px
grid:
- grid-template-columns: auto
- grid-template-areas: '"i l"'
- grid-template-columns: 1fr 50%
# - grid-template-columns: min-content min-content
# - width: min-content
# - margin: auto
# - grid-gap: 0px 0px
# name:
# # - justify-self: center
# # - padding-left: 10px
# - font-weight: bold
# - font-family: Helvetica
# - font-size: 13px
state:
- value: 'on'
styles:
name:
- color: black
state:
- color: red
- value: 'off'
styles:
card:
- opacity: 0.6
label:
- color: grey
icon:
- color: black
name:
- color: black
state:
- color: black
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
its not really that complex. It’s like 8 shadows on top of eachother. That’s what you can do with the color & shadow css attributes. You can add as many as you want and in the order that you want.
I’m not sure what you mean
Sorry. Trying to get the icon to show just left outside the middle and the label start just right outside the middle of the button, so they appear to be next to each other…
Add this:
styles:
img_cell:
- justify-content: end
label:
- justify-self: start
thanks,! was just ending up with this:
- type: 'custom:button-card'
template: button_default_state
entity: group.all_living_ceiling_spots
aspect_ratio: 12/1
label_template: >
if (states['sensor.spots_badge'].state !== 0) return 'Ceiling spots on: ' + states['sensor.spots_badge'].state;
return 'Ceiling spots';
layout: icon_label
show_icon: true
size: 40%
show_label: true
show_state: false
show_name: false
styles:
img_cell:
- justify-content: flex-end
card:
- padding: 4px
- border-radius: 6px
label:
- text-align: left
- font-size: 16px
- font-weight: bold
- padding-left: 0px
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: 1fr 60%
which isn’t right yet, but close to what you suggest;-)
Note that I:
had to change from name_template to label_template to get the template to work, something is not right in the name_template
got the icon to show up, by changing the order, and probably most importantly, the font-size… Don’t know how yet, changed so many options, but this is how it finally showed.
as you can see the top button needs some finetuning to get it centered nicely. Will use your suggestion for that first!
thanks for helping out
This is because you kept the padding on the card:
styles:
card:
- padding: 0px
Is it possible to pipe the Home Assistant Area value of an entity into the label field? I haven’t actually configured areas but realized this would be a great way to add context to our custom Homekit-Like buttons.
This data is not available in the hass object exposed passed to the cards as far as I know, so for now it’s not possible and it doesn’t seem obvious to retrieve that info (From what I’ve checked it would involve retrieving stuff from the websocket directly). If you open a feature request, I might look into it.
No worries. It’s such a minor feature that it’s probably not worth investing the time if HA core doesn’t make the data easily available. Thanks for looking into it.
Ok, I have a circumstance with Templates and Merging States that confuses me a bit. This is specifically dealing with Merging States that are based on the same value.
Based on my current template, when an entity is 'on' I apply a specific theme to the corresponding button. However, when that entity is a Fan, I also want to apply spin: true. Because of the way state merging behaves (and my template), the end result will always be spinning icons for all entities when turned on.
My current work around is to leverage two different templates where the only difference is spin: true but I feel like that sort of defeat the purpose of templates. What do you folks think?
Here’s the Template YAML in case anyone is curious or needs clarification on what I’m describing.
button_card_templates:
homekit_style_settings: #Globally unique theme settings regardless of button type or design.
styles:
card:
- border-radius: 10px
state:
# - value: 'on'
# id: fan_speed
# spin: true
# styles:
# card:
# - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
- value: 'on'
id: buttons
styles:
card:
- box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
homekit_button_settings: # Specific settings for Square Homekit buttons
template: homekit_style_settings
show_state: true
show_label: true
show_icon: true
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: Titlecase
- font-size: 14px
label:
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- justify-self: start
- padding-left: 10px
- text-transform: lowercase
- font-size: 12px
icon:
- height: 70%
homekit_light: #Light and Switch entity specific settings
template: homekit_button_settings
homekit_fan: #Fan entity specific settings
template: homekit_button_settings
state:
- value: 'on'
id: fan_speed
homekit_dimmer: #Dimmer entity specific settings
template: homekit_button_settings
tap_action:
action: toggle
hold_action:
action: more-info