Small note:
If you use the light-slider, DO NOT UPDATE your ha-slider-card! There is an update available that is not really ready for production.
I’ll make a short issue with the author, for now my recommendation is to stay with the “old” version of ha-slider-card. I’ll update this post and/or make a new one, if all seems to be resolved.
Is there a way to add these without changing to YAML mode? Adding /lovelace/button_card_templates/button_card_templates.yaml as Stylesheet to dashboard > resources did not help
EDIT: Also, would it be to much work to add these as cards in HACS? Somewhat like this DBuit/Homekit-panel-card: Homekit panel card for home assistant (github.com)
And of course well done! This looks really really great!
@filikun It should be possible but you will need to add the template file as yaml somewhere in your configuration and then include it in your configuration by using the ui.
In the case of your example:
/lovelace/button_card_templates/button_card_templates.yaml
lovelace with a folder inside with name button_card_templates
Now you should be able to use the templates in UI mode 
Let me know if you run into more problems 
Should we also do something with the resources.yaml file and themes files too? ( for getting this working with only UI mode )
Or @tben maybe you can extend the github page with some more details? ( sorry not knowing what to do with all the files in UI mode - non yaml mode )
The resources should be automatically included when you use HACS.
You will need to add the theme to your configuration.yaml (see here)
Hi tben, thanks for this nice theme.
I’ve been testing it out after installing it.
However I’m experiencing some issues with the theme.
As you can see in the screenshot the icon colors don’t appear, and also the slider button card doesn’t seem to get implemented here.
The first light on the left top is a dimmable light and the slider appears but incorrectly it seems.
Dimmed light on:
Thanks for the advice in advance
Pieter
Seems as it isn’t using the correct theme.
Did you select the correct theme in your user profile for this device?
Thanks Dylan,
That was the option I didn’t checked yet, thought this was fixed in the yaml setup as well.
Thanks again!
Another question I have is the difference in spacing, which is better visible in the dark theme.
I’m using the edge at the beginning and the end of each block.
- template: edge
type: 'custom:button-card'
Is that’s what it’s used for or is it for something else still?
Thanks!
Pieter
So the difference in width seems to be the caused by mixing a grid and a horizontal grid card
- type: grid
columns: 2
square: false
cards:
using the grid like above gives a nice layout
How many chips can i show in mobile view?
Some of them only shows as dots, when i change to landscape they shows like it should
I have a problem with buttons no alway on same place during on / off.
Here is code:
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var current_temperature = entity.attributes.current_temperature;
var temperature = entity.attributes.temperature;
if (entity.state == 'off') {
var temperature = current_temperature;
}
return temperature + '°C'
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# HEATING #
# #
########################################################################################################
heating:
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='auto') {
return 'mdi:robot-industrial';
} else if (entity.state =='heat') {
return 'mdi:radiator';
}
return 'mdi:radiator-off';
]]]
label: >-
[[[
if (entity.state =='off') {
return "Izključeno";
} else if (entity.state =='heat') {
return "Gretje";
} else if (entity.state =='auto') {
return "Auto";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
template:
- red
####################################################
# #
# HEATING WITH BOUTONS #
# #
####################################################
heating_buttons:
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- heating
type: 'custom:button-card'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'heat'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.increment_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
Hello @Mariusthvdb
trying to split up chips to separated files like you with an swipe card but i get error when loading my include file that it cannot find card type. Can you help?
- type: 'custom:button-card'
template: edge
- type: 'custom:button-card'
template: chips_temperature
This is my swipe-card setup
- type: custom:swipe-card
parameters:
spaceBetween: 8
freeMode: true
cards:
- !include /config/lovelace/includes/chip_temperature.yaml
Never mind, i nail it 
Beginners mistake.
I have no idea, maybe the different icons have different sizes which makes everything shift?
I’m just guessing here.
@tben is a frontend developer. Maybe he can look into this?
I find solution couple minutes ago. It was horizontal-stack.
I changed card type horizontal-stack to grid, and I added width: 62px in widget_icon and card style.
Still have some card left / right offset problems.
Here is complete code. (I added room temperature when heating is off)
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var current_temperature = entity.attributes.current_temperature;
var temperature = entity.attributes.temperature;
if (entity.state == 'off') {
var temperature = current_temperature;
}
return temperature + '°C'
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# WIDGET ICON #
# #
########################################################################################################
widget_icon:
tap_action:
action: toggle
color: var(--google-grey)
show_icon: true
show_name: false
size: 20px
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 14px
- place-self: center
- height: 42px
- width: 62px
grid:
- grid-template-areas: '"i"'
icon:
- color: 'rgba(var(--color-theme),0.9)'
########################################################################################################
# #
# HEATING #
# #
########################################################################################################
heating:
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='auto') {
return 'mdi:robot-industrial';
} else if (entity.state =='heat') {
return 'mdi:radiator';
}
return 'mdi:radiator-off';
]]]
label: >-
[[[
if (entity.state =='off') {
return "Izključeno";
} else if (entity.state =='heat') {
return "Gretje";
} else if (entity.state =='auto') {
return "Auto";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
template:
- red
####################################################
# #
# HEATING WITH BOUTONS #
# #
####################################################
heating_buttons:
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- heating
type: 'custom:button-card'
item2:
card:
type: grid
columns: 2
square: false
# type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'heat'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
type: grid
columns: 2
square: false
# type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
type: grid
columns: 2
square: false
# type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:plus'
tap_action:
action: call-service
service: script.increment_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
scripts
increment_heating_temperature:
alias: increment_heating_temperature
sequence:
- service: climate.set_temperature
data_template:
entity_id: '{{ entity_id }}'
temperature: '{{ (state_attr(entity_id, ''temperature'') | float) + ( 0.5 |
float) | float }}
'
mode: single
decrease_heating_temperature:
alias: decrease_heating_temperature
sequence:
- service: climate.set_temperature
data_template:
entity_id: '{{ entity_id }}'
temperature: '{{ (state_attr(entity_id, ''temperature'') | float) - (0.5 | float)
| float }}'
mode: single
card:
- type: 'custom:button-card'
variables:
entity: climate.haos_vir_haos_srv_thermostat_group
name: Ogrevanje
template: heating_buttons
Found a workaround to fix the floating of chips inside condditionals:
I packed them inside a grid-card (5 columns are perfect for my iPhone display). Within the grid card all chips are aligned left without the flex are between the chips.
Maybe it is a solution for others using conditional cards.
Perhaps someone has a better solution to the problem?
Don’t know if you can use this, but instead of the condition i just use a if function under the part I want to change.
- type: 'custom:button-card'
entity: input_select.status_hus_ha
template: chips
label: >
[[[
if (entity.state == 'hjemme') return '🏠';
if (entity.state == 'borte') return '🏃';
if (entity.state == 'ferie') return '⛱️';
else return '🔥';
]]]
Nice idea. Will remember for the future.
But I would display the different chips cards only if certain conditions are met. In my example snapshot the chip with the light bulb should only be displayed, when there are lights in state on.
If all lights are switched off, the card shouldn’t be displayed.
I’m surprised this is working. 
Nonetheless you should work with correct syntax. I’m sure, what you want is this:
- type: 'custom:button-card'
entity: input_select.status_hus_ha
template: chips
label: >
[[[
if (entity.state == 'hjemme'){
return '🏠';
} else if (entity.state == 'borte') {
return '🏃';
} else if (entity.state == 'ferie') {
return '⛱️';
} else {
return '🔥';
}
]]]
In your template you should very often see ‘
’ as this should always come up, if your entity.state is not ferie.
EDIT: the code above is not technically wrong, but the way it was before is evenly right as well! See here. Sorry for the confusion!
Ahh thanks:) I have changed it now.
I have an question regards the chips. I have multiple page and all have the same chips on top and when I do a change I have to do it to all pages. Is it possible to split this to a separat yaml-file, and have someone an example to do this?