@Mariusthvdb could you please show the exact syntax for the confirmation template that worked for you? I cannot make this work and the documentation does not seem to suggest you can use anything else but plain text.
sure:
lock:
enabled: true
unlock: hold
exemptions:
- username: !secret button_unlock_name
confirmation:
text: >
[[[ return `Are you sure you want to toggle ${entity.attributes.friendly_name}?` ]]]
Thanks! Is this only working for this action (lock), or for any other action? Like for example hold action?
Has anyone else seen this behavior since .113?
It only seems to happen when my Color Lights are set to white.
I had been ignoring at first as I thought it was my theme. But I’ve now tried a few themes and noticed the same behavior.
here is the lovelace for the button card
color: auto
color_type: icon
entity: light.left_shelf_lights
hold_action:
action: more-info
label: |
[[[
if (states['light.left_shelf_lights'].state == 'off') return "Off";
else return 'Brightness ' + (Math.round(states['light.left_shelf_lights'].attributes.brightness / 2.55)) + '%';
]]]
layout: icon_label
show_label: true
show_name: true
styles:
card:
- height: 100px
icon:
- align-self: flex-start
- height: 100%
- width: 100%
label:
- font-size: 12px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
name:
- font-size: 16px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
- font-weight: bold
type: 'custom:button-card'
The button syntax has been the same for months, was only since .113 I noticed this behavior
Hi , i am trying to leave the name visible above the cover , but only the 6 buttons remain visible…as soon as i restore the size of the cover , the name disappear.
WHere should i place the tag to get him above the cover ?
Thanks
Adding z-index: 10 to the name style part should probably fix your issue
1 Like
Hi,
is it possible to return a function like this:
label: >
[[[ {{now().strftime("%d.%m.%Y %H:%M")}} ]]]
I don’t have success with the code
templates on this card are JS, not Jinja. What you have in the {{ }} is jinja. Also, templates on the card don’t resolve real time. Meaning that will only be updated at specific times. If you want to get the current date and time into your system, it’s better to use the date_time integration and use that. It will be updated properly.
Thanks so much!
I’m not sure if this is possible, but I’m going to ask anyways 
I tried searching the thread, but it’s really long and that makes it very difficult to search.
I have multiple of these buttons setup for a Roboroc vacuum. Teach one run a script to clean a specific room. I’d like to change the color of the icon (or the button if need be) when the button is pushed/the script is on. I know I can do things based on the state of the entity (vacuum is docked, vacuum is cleaning etc.) but that would change the state of all the buttons, not the specific on that is running.
Here is an example of the code for one of the buttons:
entity: vacuum.roborock_s5_max
icon: 'mdi:television-classic'
name: Living Room
tap_action:
action: call-service
service: script.clean_living_room
type: 'custom:button-card'
TIA for any and all suggestions.
i have create a template input_select which is update with the script who is call by the button. I have 10 options on input_select which is 10 zones to clean. Each script update the input_select.
button_card:
- color: auto
color_type: icon
confirmation: Nettoyage de la Maison
entity: input_select.vacuum_aspiro_in_progress
icon: 'mdi:home'
name: Maison
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
state:
- styles:
icon:
- animation: blink 0.9s ease infinite
name:
- animation: blink 0.9s ease infinite
value: Maison
styles:
card:
- border-radius: 10px
- border: '2px solid #257236'
- height: 75px
- width: 75px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
- background-color: '#319847'
grid:
- position: relative
icon:
- position: absolute
- left: 0px
- bottom: 20px
- color: var(--light-text-color)
name:
- position: absolute
- left: 5px
- bottom: 10px
- font-variant: small-caps
- font-size: 14px
- color: var(--light-text-color)
tap_action:
action: call-service
service: script.aspiro_maison
type: 'custom:button-card'
script:
aspiro_maison:
alias: "Maison entière"
sequence:
- service: script.aspiro_pause
- delay:
seconds: 1
- service: vacuum.send_command
data:
entity_id: vacuum.xiaomi_vacuum_cleaner
command: app_zoned_clean
params: [[13115,24786,29165,34836,2]]
- service: input_select.select_option
data_template:
entity_id: input_select.vacuum_aspiro_in_progress
option: Maison
input_select:
vacuum_aspiro_in_progress:
name: Aspiro - Programme en cours
options:
- Aucun
- Maison
- Jour
- Nuit
- Litière
- Repas
- Entrée
- Salon
- Buffet
- Cuisine
- Couloir
- Douche
- Toilettes
- Anaïs
- Emma
- Parents
- InitCarte
initial: Aucun
I’m trying to resize a glance card as a custom_field entry within button-card. I have everything setup, but I can’t seem to change the size of the glance card. Is this even possible, or am I missing a simple step?
This is the working glance card within button card.
custom_fields:
sensor:
card:
columns: 1
entities:
- entity: sensor.iphone_xs_max_battery_level
- entity: sensor.travel_time
show_name: false
state_color: false
style: |
ha-card {
box-shadow: none;
background: none;
}
type: glance
and tying with style option, but I can’t seem to find the correct option.
styles:
custom_fields:
sensor:
- left: 50%
- position: absolute
entity_picture:
- border-radius: 50%
- font-size: 10px
- left: 10%
grid:
- grid-template-areas: '"i" "i" "sensor"'
Is this even possible, or am I missing a simple step?
So I succeeded at my attempt to get an icon (not really the “icon” more on that later) to glow.
I first tried to use text-shadow under icon but it wouldn’t work so then I used box-shadow:
icon:
- box-shadow: '0px 0px 15px yellow, 0px 0px 20px yellow'
But it would just put a glowing box around the icon and not make the contents glow.
I had use the html format for the label field and then used the appropriate text-shadow setting. I also had to add a size 1% to shrink the icon and set the icon to none as using the show_icon field to false just showed a big blank spot in place of the icon. This is all great since it worked, however, I have to put the source HTML as a link reference in there and I can’t get it to use the resource from the Configuration>Lovelace Dashboards>Resources when I add the URL as a CSS.
I’d much rather use a local source but I’m unsure how to make that happen so I tried just using the html link reference instead.
I’ve cleared cache, re-logged in, rebooted the server to no avail.
Any ideas on how to use the local source or the resource?
entity: switch.mud_room_lamp
size: .1%
icon: none
label: >-
<link rel="stylesheet"
href="http://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"><i
class="mdi mdi-floor-lamp" </i>
show_label: true
state:
- styles:
card:
- background: black
- border-radius: 20px
label:
- color: yellow
- font-size: 5vw
- text-shadow: '0px 0px 15px yellow, 0px 0px 20px yellow'
- transition: all 1s ease
name:
- font-size: 1vw
- color: white
- text-shadow: '0px 0px 5px white, 0px 0px 10px white'
- transition: all 1s ease
value: 'on'
- styles:
card:
- background: black
- border-radius: 20px
label:
- color: grey
- font-size: 5vw
- transition: all 1s ease
name:
- font-size: 1vw
- color: white
- transition: all 1s ease
value: 'off'
type: 'custom:button-card'
Add a delay to the script and it will have an ‘on’ / ‘off’ toggle to it. Otherwise it executes instantly. Your other option is to make a template switch.
use filter:
icon:
- filter: drop-shadow(0px 0px 1px rgba(0,0,0,1))
1 Like
adjust the size of your grid areas:
- grid-template-areas: '"i" "sensor"'
- grid-template-rows: 1fr 10%
Haha, that works! Thanks! Hopefully my journey taught me something rather than just waste my time.
Lets say I want go with the route I started on, is there anything that can be done about the resource stuff?
If you want to use an icon in a text field, you can use the <ha-icon> element.
<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon>
But why wouldn’t you want to use the standard icon from the button?
Thanks for the response. Mainly, curiosity at this point 
I have some other plans to try to use Dygraphs if possible with in a card and the resource information would be helpful for adding other local resources and being able to use them.
I was over thinking it and ‘triggering’ off the wrong entity:
entity: script.clean_master_bedroom
icon: 'mdi:bed-queen'
name: M Bedroom
tap_action:
action: call-service
service: script.clean_master_bedroom
state:
- value: 'off'
color: black
- value: 'on'
color: green
type: 'custom:button-card'
Working perfectly. Black when the script is not running and green when it each. Each of my buttons uses a different script, so I’m all set.