Sorry, I misunderstood you.
Open Raw Editor and paste them at the same level as resources (top)
1 Like
hi!
in an above reply i saw a post of a button card with a circle-sensor-card in it to show the brightness of the light from the button card (@lubbertkramer). if i try his code it won’t show the brightness. But if i change the circle-sensor-card’s entity ('[[brightness]]') to my light’s entity then it shows just the on/off state. As you can see in the picture, that’s the current state. hope someone can help me. Thanks!!
type: 'custom:button-card'
name: Ledstrip Kast
icon: 'mdi:led-strip-variant'
entity: light.wled_kast
color: auto
aspect_ratio: 1/1
show_state: true
show_label: false
tap_action:
action: toggle
haptic: light
styles:
card:
- border-radius: 10px
- width: 105px
- height: 105px
state:
- font-size: 11px
- font-family: Helvetica
- margin-left: auto
- margin-right: auto
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"n n" "i i" "s brightness"'
- grid-template-rows: 1fr 2fr 1fr
- grid-template-columns: 1fr 1fr
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: start
- margin-left: auto
- margin-right: auto
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- padding: 0px 10px
- justify-self: start
- padding-right: 10px
custom_fields:
brightness:
- max: 100
- min: 0
- width: 2em
- overflow: visible
- position: absolute
- left: 4em
- top: 4em
custom_fields:
brightness:
card:
type: 'custom:circle-sensor-card'
entity: light.wled_kast
max: 100
min: 0
stroke_width: 15
stroke_color: var(--theme-button-icon-color-state-on)
gradient: true
font_style:
color: var(--theme-button-name-color-state-on)
label: |
[[[
if (typeof(entity) === 'undefined') return;
if ('brightness' in entity.attributes)
{
if (entity.attributes
&& (entity.attributes.brightness <= 255)) {
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}
]]]
state:
- value: '[[[ return '''' + entity.state + ''''; ]]]'
spin: '[[spin]]'
styles:
card:
- '--ha-card-background': >-
[[[ return 'var(--theme-button-card-color-state-' + entity.state +
')'; ]]]
icon:
- color: >-
[[[ return 'var(--theme-button-icon-color-state-' + entity.state +
')'; ]]]
- animation: >-
[[[ return 'var(--theme-button-icon-animation-state-' + entity.state
+ ')'; ]]]
lock:
- color: >-
[[[ return 'var(--theme-button-lock-color-state-' + entity.state +
')'; ]]]
label:
- color: >-
[[[ return 'var(--theme-button-label-color-state-' + entity.state +
')'; ]]]
name:
- color: >-
[[[ return 'var(--theme-button-name-color-state-' + entity.state +
')'; ]]]
state:
- color: >-
[[[ return 'var(--theme-button-state-color-state-' + entity.state +
')'; ]]]
custom_fields:
brightness:
- fill: >-
[[[ return 'var(--theme-button-card-color-state-' + entity.state +
')'; ]]]
entity.attributes.brightness should be the way to go.
since the latest release I encounter a weird behaviour.
I have the following card (pre 3.2.3):
As soon as I update to the newest release it looks like this (white overlay):
Interestingly this only happens in Safari (also tried it in Firefox).
The yaml in question:
- type: custom:mod-card # robovac
style: |
ha-card {
height: 115px;
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
{% else %}
-4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
{% endif %}
}
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: vacuum.robovac
type: custom:multiple-entity-row
name: Robovac
show_state: false
entities:
- attribute: status
name: Status
- attribute: battery_level
name: Battery
unit: '%'
- entity: counter.vacuum_counter
name: Count
style: |
ha-card {
height: 70px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:play
show_name: false
tap_action:
action: call-service
service: vacuum.turn_on
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:pause
show_name: false
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:broom
show_name: false
tap_action:
action: call-service
service: vacuum.clean_spot
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:map-marker
show_name: false
tap_action:
action: call-service
service: vacuum.locate
service_data:
entity_id: vacuum.robovac
- type: custom:button-card
color: auto
entity: vacuum.robovac
size: 25%
icon: mdi:home-map-marker
show_name: false
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.robovac
What i did was using a custom field for a sensor template which shows the brightness. In my template i refer to the custom button card config that’s in my lovelace. That’s why only [[brightness]] is used, that maps to sensor.brightnesshal for example
- type: custom:decluttering-card
template: button_default
variables:
- entity: light.hal
- name: Hal
- icon: 'mdi:lightbulb'
- brightness: sensor.lighthal
This is related to vertical-stack-in-card, not button-card.
Fortunately, I’ve just created a drop-in replacement for vertical-stack-in-card which supports 0.107.0 and an bunch of other features 
Check it out here:
4 Likes
thanks for this, we needed a new vertical-stack-in-card! Love the new functionality this offers at a glance, will dive in . Much appreciated!
Not sure if this solves our ‘grid’ demand, but certainly offers immediate benefits. Cool!
My lights can be controlled but there is no way to know if the light is on or off. That is the reason that I want to have a button with two type areas: one for on and one for off (in the same button).
Is it possible to achieve that with the button card? can I somehow define two tap areas on the button?
Thx
Yes, using custom_fields you can embed 2 other button cards inside the button-card, one for on and one for off 
1 Like
I have succeeded to create some initial demo of such button. Thx. I’ve got strange issue. If I call the light.turn_on service directly, the light turn on and off. If I create script for turn on / off, the card work as expected. Any idea why (below is the working version)?
- type: custom:button-card
name: "Light"
aspect_ratio: 1/1
custom_fields:
'on':
card:
type: custom:button-card
name: 'ON'
icon: mdi:lightbulb-outline
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: script.light_turn_on
service_data:
entity_id: light_008
'off':
card:
type: custom:button-card
name: 'OFF'
icon: mdi:lightbulb-off-outline
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: script.light_turn_off
service_data:
entity_id: light_008
styles:
custom_fields:
'on':
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n n" "on off"'
- grid-template-columns: 50% 50%
- grid-template-rows: 50% 50%
If it double clicks you’re probably not using the latest version of the card. What is the javascript console saying?
Hi there!
since the 0.107 version , when i click on a button with toggle action, instead of activate action it’s opening the more information tab.
Any idea ?
action: toggle
color: orange
color_type: card
custom_fields:
notification: |
[[[ return states['switch.nonaffecte'].state ]]]
entity: script.chauffage_lit
icon: 'mdi:hotel'
name: Chauffage lit
size: 30%
styles:
card:
- font-size: 18px
- font-weight: bold
custom_fields:
notification:
- background-color: |
[[[
if (states['switch.nonaffecte'].state == 'off')
return "green";
return "red";
]]]
- border-radius: 20%
- position: absolute
- left: 70%
- top: 5%
- height: 25px
- width: 30px
- font-size: 12px
- line-height: 20px
grid:
- position: relative
type: 'custom:button-card'
There are so many awesome examples that people have created with this card that I feel the card templates and a screenshot of each should be put on the Github repo so others can easily copy / take inspiration from them without sifting through over 3000 posts… I know this is a big ask but if each template author submitting their code if woudn’t be too hard… please?
5 Likes
I wss thinking about this lately, let me put something in place.
4 Likes
He meant Chrome browser (via … More Tools → Developer Tools, click on Console tab)
EDIT: Seems to be a browser issue, works on my android phone but not firefox.
Ive made a slider inside my button but the state value is not updated until I refresh the browser. Bug or is it a limitation? The custom:slider-entity-row works when not used inside a button.
- type: custom:mod-card
style: |
ha-card {
padding: 8px 16px 20px 16px;
}
card:
type: custom:layout-card
min_columns: 1
max_columns: 1
layout: vertical
justify_content: start
cards:
- type: custom:button-card
name: Gardin
template: slider_button
icon: mdi:blinds
custom_fields:
slider:
card:
type: custom:slider-entity-row
full_row: true
hide_state: false
entity: input_number.curtain_slider
That might be a bug, please open an issue on gh and paste your full button config with the template, I’ll have a look.
You need to use tap-action and call-service like this:
- color_type: blank-card
type: 'custom:button-card'
- color: auto
entity: script.everyday_tv_rum
icon: 'mdi:lightbulb-on-outline'
name: Dag
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.everyday_tv_rum
styles:
card:
- height: 90px
- width: 90px
type: 'custom:button-card'
- color: auto
entity: script.focus_tv_rum
icon: 'mdi:book-open-variant'
name: Focus
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.focus_tv_rum
styles:
card:
- height: 90px
- width: 90px
type: 'custom:button-card'
- color: auto
entity: script.relax_tv_rum
icon: 'mdi:lightbulb-on'
name: Soft
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.relax_tv_rum
styles:
card:
- height: 90px
- width: 90px
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
2 Likes
Thank you ! It’s working!
1 Like