I’m not using a boot time sensor but the Dev Tools give me a float error.
I see there are warnings due to the new templates code. I’ll see if I can modify my existing templates to see if it fixes the issues.
Copy it into your Dev Tools.
Wow, this is exactly what I am looking for. I’m going to try this out. Thanks.
I did as well and started using the lock function to solve it on buttons where it would cause a problem.
Can someone tell me a way, to use the !include_* function for a button_card_templates file in UI-mode? Or any other way to include the content of button_card_templates file in UI-mode? Despite copying everything into the raw-config-editor?
There is a thread with a feature request, but that doesn’t help either, as not too many voted til now (hint, hint, go vote, if you’d find that useful):
Thanks a lot for any ideas! 
Hi,
I want to migrate slowly some of my button from the built-in button-card to this one. Sadly, the style be default does not match the built-in button. Can someone share the style to apply to my buttons to keep the built-in style? Thx
Hi! I’ve done some kind of “quick look button card” to all of my main rooms, but i’m stuck while trying to center some icons in the grid, the grid i’m trying to get is 3x4, i read the documentation which says that to fill the empty space just use a period (.) but still not getting aligned like other cards. Hope someone can help me 
Here is my code:
type: custom:button-card
entity: group.lights_master
tap_action:
action: more-info
entity: group.master
hold_action:
action: more-info
entity: sensor.0x00158d00027303ac_temperature
icon: mdi:bed
name: Master
styles:
card:
- height: 100px
- width: 116px
grid:
- grid-template-areas: '"n i .""temp temp .""humidity humidity .""aire door fence"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
- font-weight: bold
- font-size: 13px
- align-self: start
- justify-self: middle
icon:
- width: 30%
- left: 30%
- align-self: end
- justify-self: end
img_cell:
- justify-content: start
- align-items: start
custom_fields:
humidity:
- align-self: start
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.0x00158d00027303ac_humidity"].state > 70)
return "red"; ]]]
temp:
- align-self: start
- justify-self: start
- '--text-color-sensor': |-
[[[ if (states["sensor.0x00158d00027303ac_temperature"].state < 17)
return "red"; ]]]
aire:
- align-self: start
- justify-self: start
- color: var(--text-color-sensor)
- '--text-color-sensor': >-
[[[ if (states["climate.master_room_ac"].state === "cool") return
"#339bf6"; ]]]
door:
- align-self: start
- justify-self: start
- color: var(--text-color-sensor)
- '--text-color-sensor': >-
[[[ if (states["binary_sensor.0x00158d0004aaecae_contact"].state ===
"on") return "red"; else return "green" ]]]
fence:
- align-self: start
- justify-self: start
- color: var(--text-color-sensor)
- '--text-color-sensor': >-
[[[ if (states["binary_sensor.0x00158d0001dff41e_contact"].state ===
"on") return "red"; else return "green" ]]]
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px;">
</ha-icon> <span style="color: var(--text-color-sensor);">${states['sensor.0x00158d00027303ac_temperature'].state} °C</span>`
]]]
humidity: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px;">
</ha-icon> <span style="color: var(--text-color-sensor);">${states['sensor.0x00158d00027303ac_humidity'].state} %</span>`
]]]
aire: |
[[[
return `<ha-icon
icon="mdi:air-conditioner"
style="width: 18px; height: 18px;">
</ha-icon> <span style="color: var(--text-color-sensor);">${states['climate.master_room_ac'].state}</span>`
]]]
door: |
[[[
if (states["binary_sensor.0x00158d0004aaecae_contact"].state ===
"off") return `<ha-icon
icon="mdi:door-sliding-lock"
style="width: 18px; height: 18px;">
</ha-icon> ` ;
else return `<ha-icon
icon="mdi:door-sliding-open"
style="width: 18px; height: 18px;">
</ha-icon> `
]]]
fence: |
[[[
if (states["binary_sensor.0x00158d0001dff41e_contact"].state ===
"off") return `<ha-icon
icon="mdi:gate"
style="width: 18px; height: 18px;">
</ha-icon> ` ;
else return `<ha-icon
icon="mdi:gate-open"
style="width: 18px; height: 18px;">
</ha-icon> `
]]]
Drop - justify-self: start for air, door and fence in the styles section.
thanks for replying that fast!!, but sadly i’m still getting “Master” word shrunk
Sorry, I’ve overlooked that. Change grid-template-columns to
- grid-template-columns: auto 1fr 1fr
thanks! it did work
I’m trying to learn, and I have read up as good as I can right now.
But I think I need some help here…
I want to create a template for these buttons;
Could someone help me out with the coding. I’m trying my best by my self, but I aint getting any great results… 
Absolutely not.
I’m just trying to learn how to create buttons for my specific needs and likings.
No need to be harsh.
This is the actual (the newest) template for the light_slider (actual means, it collapses the slider when off):
card_light_slider:
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
Without the “collapse”:
card_light_slider:
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
1 Like
Hello,
I would like to create a button-card for my HVAC based on what I’ve made for my Hue light like that:
And the code:
type: custom:button-card
entity: light.veranda
name: Véranda
icon: mdi:floor-lamp-dual
aspect_ratio: 11/9
state:
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
- border: 1px rgba(80, 80, 80) solid
name:
- color: rgba(0, 0, 0, 0.6)
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 50%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: true
- transition: true
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
And the DEV of my entity HVAC:
I would like:
- on tap_action make a toggle off<>heat_cool of my HAVC
- double tap action, show the more info of my Climate_sejour
- show in the head right circle (or not in the circle):
- the current_temperature
- the temperature (consign)
Hi guys!
I have a new question…why in Home Assistant browser (PC) interface I see the complete card, and from the APP / Smartphone I see it cut below (and square)?
Did I get something wrong with the code?
Thanks
This is the code:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 6%
- font-size: 100%
custom_fields:
alarm:
- align-self: start
- position: absolute
- height: 100%
- width: 100%
- line-height: 28px
custom_fields:
alarm:
card:
type: custom:alarmo-card
name: ALLARME
entity: alarm_control_panel.alarmo
no_card: false
use_clear_icon: true
style: |
ha-card {
box-shadow: none;
PC Browser:
Smartphone/APP
Hello,
After hours of debugging i didn’t find the reason of the bug.
My button do not change of color, text did, but not the color :
chips_icon:
template: chips
show_icon: true
size: 80%
show_state: false
tap_action:
action: more-info
entity: '[[[ return variables.entity ]]]'
variables:
icon: "mdi:arrow-left"
entity: "alarm_control_panel.tyxal_alarm"
prefix: ""
icon: '[[[ return variables.icon ]]]'
label: |
[[[
if (states[variables.entity].state == 'disarmed'|| states[variables.entity].state == 'off'){
return variables.prefix + ` Désactivée`
}
if (states[variables.entity].state == 'armed' || states[variables.entity].state == 'on'){
return variables.prefix + ` Activ..e`
}
return '??' ;
]]]
styles:
grid:
- grid-template-areas: '"i l"'
label:
- justify-self: center
- padding: 0px 6px
- font-weight: bold
- font-size: 14px
chips_color:
template: chips
show_icon: true
size: 80%
show_state: false
triggers_update: all
tap_action:
action: more-info
entity: '[[[ return variables.entity ]]]'
variables:
icon: "mdi:arrow-left"
entity: ""
prefix: ""
min: 0
max: 6
icon: '[[[ return variables.icon ]]]'
label: |
[[[
if (states[variables.entity].state < variables.min)
return variables.prefix + " bas"
if (states[variables.entity].state > variables.min && states[variables.entity].state < variables.max)
return variables.prefix + " moyen"
if (states[variables.entity].state > variables.max)
return variables.prefix + " haut"
return '??' ;
]]]
states:
- operator: '>'
value: variables.max
styles:
icon:
- color: 'rgba(var(--color-red),1)'
img_cell:
- background-color: 'rgba(var(--color-red),0.2)'
card:
- background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-red-text),1)'
label:
- color: 'rgba(var(--color-red-text),1)'
- operator: '<'
styles:
icon:
- color: 'rgba(var(--color-green),1)'
img_cell:
- background-color: 'rgba(var(--color-green),0.2)'
card:
- background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-green-text),1)'
label:
- color: 'rgba(var(--color-green-text),1)'
value: variables.min
- operator: 'default'
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow),0.2)'
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-yellow-text),1)'
label:
- color: 'rgba(var(--color-yellow-text),1)'
styles:
grid:
- grid-template-areas: '"i l"'
label:
- justify-self: center
- padding: 0px 6px
- font-weight: bold
- font-size: 14px
- template: chips_color
variables:
icon: "mdi:sunglasses"
entity: "sensor.wattignies_uv"
prefix: "UV :"
min: 3
max: 6
type: 'custom:button-card'
any idea ?
EDIT : theme :
#main interface colors
primary-color: '#434343'
google-red : '#F54436'
google-green : '#01C852'
google-yellow : '#FF9101'
google-blue : '#3D5AFE'
google-violet : '#661FFF'
google-grey: '#BBBBBB'
color-red : 245, 68, 54
color-green : 1, 200, 82
color-yellow : 255, 145, 1
color-blue : 61, 90, 254
color-purple : 102, 31, 255
color-grey : 187, 187, 187
color-pink : 233, 30, 99
color-theme : 51,51,51
color-background-yellow : 250, 250, 250
color-background-blue : 250, 250, 250
color-background-green : 250, 250, 250
color-background-red : 250, 250, 250
color-yellow-text: 'var(--primary-text-color)'
color-blue-text: 'var(--primary-text-color)'
color-green-text: 'var(--primary-text-color)'
color-red-text: 'var(--primary-text-color)'
opacity-bg: '1'
thanks
Nothing wrong with th card, it shows exactly like it should. Smaller screen = card get’s fitted. Everything is there, the border, the margins/paddings, looks fine! What do you want to have different?
Forget it, just realised, the last line of buttons is missing… I’ll have to look again.