I developed a custom card based on Soft UI: Lovelace Soft UI - Simple and Clean Lovelace Configuration
It’s available on HACS and has many configuration options.
GitHub: https://github.com/Savjee/button-text-card
Feel free to open issues, contribute code or make suggestions for new features 
I tried creating a basic test button with this to toggle a light but I simply gethe below with no tap action working
code:
type: 'custom:button-text-card'
title: Dining Lights
icon: 'mdi:lightbulb-multiple'
entity: light.dining_lights
tap_action:
action: toggle
Where have I gone wrong here? Unfortunately the tap action stuff isn’t documented for this card
Hmm, that looks correct to me. The tap_action should follow the default behaviour. Here’s one that I use (and works):
entity: switch.3d_printer
icon: 'mdi:power'
icon_height: 30px
name: Aan/Uit
show_icon: true
show_name: true
tap_action:
action: toggle
type: button
Are you sure the entity_id is correct?
The entity_id is definitely correct
@Savjee How do you return state on an specific attribute other than the default state?
As usual, I’m sure it is some little detail.
Tried these and I don’t get a result.
title: |
[[[ return states["sensor.nws_alerts"].spoken_desc ]]]
title: |
[[[ return states["sensor.nws_alerts", "spoken_desc"].state ]]]
title: |
[[[ return states.attribute["sensor.nws_alerts", "spoken_desc"].state ]]]
title: |
[[[ return states["sensor.nws_alerts", "spoken_desc"].attribute ]]]
There are two ways you can do this.
I recommend defining an entity_id. That way you can use the shorthand entity.state or entity.attributes.XXXX which is a bit shorter:
type: 'custom:button-text-card'
entity: climate.office_ac
hide_condition: |
[[[ return entity.state === "off" ]]]
subtitle: >
[[[ return entity.attributes.temperature + '°C']]]
title: AC on
Alternatively, you can use states[xxx] as well:
states["climate.office_ac"].attributes.temperature
That did the trick, Thank you @Savjee.
type: 'custom:button-text-card'
entity: sensor.nws_alerts
hide_condition: |
[[[ return entity.attributes.spoken_desc === null ]]]
title: ''
subtitle: |
[[[ return entity.attributes.spoken_desc ]]]
icon_size: 55
icon_color: red
icon: 'mdi:alert'
icon_animation: ''
font_color: black
large: true
background_color: yellow
Some examples that may be useful:
type: 'custom:button-text-card'
title: |
[[[ return states["sensor.purpleair_description"].state ]]]
subtitle: Air Quaility
icon_size: 55
icon_color: |
[[[
if(states["sensor.purpleair_aqi"].state > 300){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 200){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 150){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 100){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 50){
return 'black';
} else{
return 'black';
}
]]]
icon: |
[[[
if(states["sensor.purpleair_aqi"].state > 300){
return 'mdi:emoticon-dead';
} else if(states["sensor.purpleair_aqi"].state > 200){
return 'mdi:emoticon-cry';
} else if(states["sensor.purpleair_aqi"].state > 150){
return 'mdi:emoticon-sad';
} else if(states["sensor.purpleair_aqi"].state > 100){
return 'mdi:emoticon-confused';
} else if(states["sensor.purpleair_aqi"].state > 50){
return 'mdi:emoticon-neutral';
} else{
return 'mdi:emoticon-excited';
}
]]]
font_color: |
[[[
if(states["sensor.purpleair_aqi"].state > 300){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 200){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 150){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 100){
return 'white';
} else if(states["sensor.purpleair_aqi"].state > 50){
return 'black';
} else{
return 'black';
}
]]]
large: true
background_color: |
[[[
if(states["sensor.purpleair_aqi"].state > 300){
return '#731425';
} else if(states["sensor.purpleair_aqi"].state > 200){
return '#8C1A4B';
} else if(states["sensor.purpleair_aqi"].state > 150){
return '#EA3324';
} else if(states["sensor.purpleair_aqi"].state > 100){
return '#EF8533';
} else if(states["sensor.purpleair_aqi"].state > 50){
return '#FFFF55';
} else{
return '#68FF43';
}
]]]
Hey! Total noob here.
How can I add more condition to hide the card to this code? I want it only to show if the alarm is triggered, which means it needs to stay hidden when it is disarmed/armed_away/armed_home.
type: 'custom:button-text-card'
large: true
entity: alarm_control_panel.alarmo
title: Alarme ligado!
background_color: '#A81419'
font_color: '#fff'
icon: 'mdi:alarm-light'
hide_condition: |
[[[ return entity.state === "armed_home";"armed_away";"disarmed" ]]]
tap_action:
action: navigate
navigation_path: /lovelace/seguranca
There are two ways of doing this.
First, you could hide the card when your alarm is set to armed_home OR armed_away OR disarmed:
hide_condition: |
[[[ return entity.state === "armed_home" || entity.state === "armed_away" || entity.state === "disarmed" ]]]
Or you could say: hide the card when the alarm is not triggered:
hide_condition: |
[[[ return entity.state !== "triggered" ]]]
Thank you! Now I understand the logic X)
Is it possible also to hide the card with a tap?
Not sure. You could try to configure a tap_action that then turns on an input_boolean:
That input_boolean could then be used as a condition for your card.
Just wanted to give you a heads up, I love your button text card. It’s really practical and simple to use while still being very beautiful. Great work!
I am looking to do the exact same thing as you. I’d like to change features based on the attribute “title”. Can you tell me what I am doing wrong with my icon color? Thank you!
type: 'custom:button-text-card'
entity: sensor.nws_alerts
icon: mdi:weather-cloudy
title: ''
subtitle: |
[[[ return entity.attributes.title ]]]
icon_color: |
[[[
if(states["sensor.nws_alerts"].attributes.title == Flood Watch){
return 'red';
} else{
return 'black';
}
]]]
1st thing I see is that your indentions are not the same: under subtitle and icon_color should be the same indention.
ahh… Flood Watch should be in quotes ‘Flood Watch’
Need to make sure that that is the actual title that comes across for an actual Flood Watch
As @GlennHA mentioned, wrap Flood Watch in quotes.
That should do it (if your sensor has a title attribute):
type: "custom:button-text-card"
entity: sensor.nws_alerts
icon: mdi:weather-cloudy
title: ""
subtitle: |
[[[ return entity.attributes.title ]]]
icon_color: |
[[[
if(states["sensor.nws_alerts"].attributes.title == "Flood Watch"){
return "red";
} else{
return "black";
}
]]]
Thank you!
Sorry for necro-posting. I found this card and love the simple design. I’d like to incorporate it into my dashboards but I can’t seem to find a way to set the card width. Even adding the “collumns:” statement doesn’t seem to change anything. Thoughts?
I should clarify that I want to make the card smaller. I know about the “large” attribute but that’s not what I want.
I found that I can insert this into a stack card and force the stack card to the smaller format which seems to work but very ineffective to have to use 2 cards for a single card.