That looks like it will work
The more you play with it the more you’ll see places where you can consolidate some of the settings. For example, the off
’ state is pretty consistent across all 3 of your templates, so if you wanted to you could make a base template with that config that the other 3 use as a template. There is also an id
feature for states that makes it possible for the templates to merge state configs correctly (even if the values aren’t the same!)
Just for fun, and because I like sharing ideas, here is a different way to define your templates given your example:
standard-button:
template: standard
state:
- id: value_on
value: 'on'
styles:
card:
- background-color: gold
name:
- color: blue
icon:
- color: blue
- opacity: 1
- id: value_off
value: 'off'
styles:
card:
- background-color: slategrey
name:
- color: white
icon:
- color: white
- opacity: 0.5
standard-alert:
template: standard-button
state:
- id: value_on
styles:
card:
- background-color: darkgrey
name:
- color: yellow
icon:
- color: yellow
- id: value_off
styles:
card:
- background-color: darkgey
standard-cover:
template: standard-button
state:
- id: value_on
value: 'open'
- id: value_off
value: 'closed'
What I did was use your standard-button
as a common template for the other two templates. I added id
settings for the 2 states so that the other 2 templates can add or replace configs as needed.
In your standard-alert
template I changed the state settings to refer to the id
instead of the value
and removed any settings already defined in the standard-button
template, such as the icon opacity and a few other things.
In the standard-cover
template I only had to change the value
settings to open
and closed
, since the colors in the standard-button
template are already what is needed.
The custom button card is so flexible that there is often more than a couple ways to get the desired effect. You could even use a single template to do this with some variables and javascript to adjust the colors. I’m having fun writing this up, so I’ll give an example:
standard-button:
template: standard
variables:
value_on: 'on'
value_off: 'off'
background_color_on: gold
background_color_off: slategrey
text_color_on: blue
text_color_off: white
state:
- id: value_on
value: '[[[ return variables.value_on ]]]'
styles:
card:
- background-color: '[[[ return variables.background_color_on ]]]'
name:
- color: '[[[ return variables.text_color_on ]]]'
icon:
- color: '[[[ return variables.text_color_on ]]]'
- opacity: 1
- id: value_off
value: '[[[ return variables.value_off ]]]'
styles:
card:
- background-color: '[[[ return variables.background_color_off ]]]'
name:
- color: '[[[ return variables.text_color_off ]]]'
icon:
- color: '[[[ return variables.text_color_off ]]]'
- opacity: 0.5
And then to use that template:
# the variables don't need to be set because the template's default values are good
- entity: binary_sensor.katie_smith_s_galaxy_s7_edge_presence_2
name: Katie
template: standard-button
type: 'custom:button-card'
# same template, but setting a few variables to change colors
- entity: binary_sensor.daytime_sensor
name: Day?
template: standard-button
type: 'custom:button-card'
variables:
background_color_on: darkgrey
background_color_off: darkgrey
text_color_on: yellow
# again, same template but set some variables to change the on/off values
- entity: cover.garage
name: Over head
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.3
variables:
value_on: open
value_off: closed
Hopefully that wasn’t too deep and it gives you a taste of what’s possible.