can i set a dynamic icon so it changes when an entity becomes unavailable?
That’s what I use when an entity is unavailable (only relevant parts of the config are shown):
I display an icon in the top right corner which is blinking and the icon and name are greyed out.
- type: custom:button-card
styles:
grid:
- position: relative
custom_fields:
status:
- display: none
- position: absolute
- right: 5%
- top: 5%
custom_fields:
status: >
[[[
return `<ha-icon icon="mdi:lan-disconnect" style="width: 16px; height: 16px"/>`
]]]
state:
- value: unavailable
id: unavailable
styles:
icon:
- color: '#666666'
name:
- color: '#666666'
custom_fields:
status:
- display:
- color: red
- animation: blink 2s ease infinite
6 Likes
Hi Rom,
i want to add percent number when lights is on, how can i do it?
This is my button template:
Button2:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
# - background-color: 'rgba(255,255,240,0.9)'
- background-color: '#fff5bc'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: black
state:
- color: gray
label:
- color: black
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
# - opacity: 0.3
label:
- color: black
icon:
- color: 'black'
name:
- color: black
state:
- color: 'black'
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
in lovelace:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: Button2
variables:
- name: Bedroom Lights
- entity: light.bedroom_lights
- icon: mdi:ceiling-light
Thank you!
I really like your frontend about lights, as i am a beginner using the button card, will you help me sharing that code?
Please look at my post above yours, i shared the the template for the card.
Yes, i read it, i was meaning the whole lovelace yaml regarding all the lights…
EDIT: Ah, sorry, maybe i understand… when configuring a template, then you must only put in the lovelace.yaml the name of the entities… Is it correct?
yes, correct
No reply’s but i already figured it out myself.
1 Like
Is it possible to template multiple lines?
Or more specifically, can I template this doubletap-action?
I have a decluttering template that uses browser_mod in the dbltap_action which I would like to reuse for entities that do not have a dbltap_action or use something completely different.
For example…
default:
- tap_action: none
- dbltap_action: none
card:
tap_action:
action: '[[tap_action]]'
dbltap_action:
action: call-service
service: browser_mod.command
service_data:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
card:
type: entities
entities:
- entity: >
[[[ return 'input_select.manually_set_' + entity.entity_id.split('.')[1]; ]]]
deviceID:
- this
Hi.
I am trying to get my lights to start from a brightness level from a input_number but I cant get it to work.
If I write 40, 60 , 200 after brightness it takes that value but not with this code
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.balcony_light
brightness: >
[[[
states['input_number.light_test'].state
]]]
Is it something with int or something? I have tried everything now 
EDIT: of course 5 minutes after posting, I noticed the note in the docs that says it supports html formatting so the below works, so I’m answering my own question here for the question I ask below if anyone needs to know how to put a newline in their button label.
name: SWISS <br> CLASSIC
Original post below:
Hey, does anyone know how I can span the label for the button over 2 lines rather than just one? I have some small and simple text-only buttons for playlists but would like to span the name over 2 lines so that I can distinguish between them. For example, in the below I would like to have SWISS CLASSIC be shown as
SWISS
CLASSIC
Rather than SWISS CL… Because it gets truncated. Any idea how to do this?
- type: "custom:button-card"
name: SWISS CLASSIC
styles:
card:
- padding: 12px 0px
- font-size: 14px
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "media_player.itunes"
media_content_id: "radio-swiss-classic"
media_content_type: "playlist"
1 Like
Yea, I tried that but unfortunately it’s still a no go. I event thought it wasn’t rendering because of templates but I set a view without them with no luck.
That won’t work. Light.toggle does not accept data.
It does for me just not this:
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.balcony_light
brightness: >
[[[
states['input_number.light_test'].state
]]]
But if I turn on the light and set the light to max in brightness and uses this instead:
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.balcony_light
brightness: 20
the light turns off on first press and on second it turns on with 20 in brightness…
I turn it off, change the brightness to 100 and press the toggle it starts with 100.
So I guess it supports data I cant just get it to get the data from input_number.light_test
If that’s the case you need to terminate the line and add the word return before the states object. This of course is if that field even accepts templates
[[[
return states['input_number.light_test'].state;
]]]
1 Like
Hi,
Is there a way to minimize each header, i mean when i click on living room it wall maximize.
all the living room entities will fold under the living room header.
instead of scrolling.
I get the return that it needs an int for data…
I have tried
return (int)states['input_number.light_test'].state;
and also
[[[
int test = (int)states['input_number.light_test'].state;
return test;
]]]
But nothing change…
That’s not how it works in javascript.
return Number(states['input_number.light_test'].state);
1 Like
Haha! You are a life saver as always! 
Thx again man!