This is an automated archive made by the Lemmit Bot.
The original was posted on /r/homeassistant by /u/DenesGarda on 2025-07-23 09:11:52+00:00.
These use custom button cards. I figured I'd share them if anyone would be interested in using them.
This is the template:
button_card_templates:
status_pill:
show_name: true
show_label: true
show_icon: true
styles:
card:
- height: 40px
- width: auto
- padding: 6px
- display: flex
- flex-direction: column
- justify-content: center
- align-items: flex-start
- border-radius: 150px
grid:
- grid-template-areas: |
"i n"
"i l"
- grid-template-columns: 30px 1fr
- grid-template-rows: 1fr 1fr
- column-gap: 4px
icon:
- width: 22px
- height: 22px
- align-self: center
- color: '[[[ return variables.icon_color || "#666"; ]]]'
name:
- justify-self: start
- font-weight: bold
- font-size: 12px
- align-self: center
- padding-right: 8px
label:
- justify-self: start
- font-size: 11px
- color: gray
- align-self: center
- padding-right: 8px
icon: '[[[ return variables.icon || "mdi:help-circle"; ]]]'
name: '[[[ return variables.name || "Default Name"; ]]]'
label: '[[[ return variables.label || ""; ]]]'
This is an example of how I'm using them:
type: custom:button-card
template: status_pill
variables:
name: Lights
icon: |
[[[
const lights = [
'light.cync_reveal_full_color_a19',
'light.cync_reveal_full_color_a19_2',
'light.cync_reveal_full_color_a19_3',
'light.desk_lamp'
];
let count = 0;
lights.forEach(e => {
if (states[e] && states[e].state === 'on') count++;
});
if (count === 0) return 'mdi:lightbulb-outline';
if (count === 1) return 'mdi:lightbulb';
if (count === 2) return 'mdi:lightbulb-multiple';
return 'mdi:lightbulb-group';
]]]
icon_color: |
[[[
const lights = [
'light.cync_reveal_full_color_a19',
'light.cync_reveal_full_color_a19_2',
'light.cync_reveal_full_color_a19_3',
'light.desk_lamp'
];
let count = 0;
lights.forEach(e => {
if (states[e] && states[e].state === 'on') count++;
});
return count === 0 ? '#6b6b6b' : '#FFC107'; // amber when any on
]]]
label: |
[[[
let count = 0;
const lights = [
'light.cync_reveal_full_color_a19',
'light.cync_reveal_full_color_a19_2',
'light.cync_reveal_full_color_a19_3',
'light.desk_lamp'
];
lights.forEach(e => {
if (states[e] && states[e].state === 'on') count++;
});
return count + " on";
]]]
tap_action:
action: navigate
navigation_path: "#lights"
triggers_update:
- light.cync_reveal_full_color_a19
- light.cync_reveal_full_color_a19_2
- light.cync_reveal_full_color_a19_3
- light.desk_lamp
It's really important to include the "triggers update" field, otherwise the icons and statuses won't update automatically.