Button Card
🧩 Syntax:
type: custom:button-card
name: Wohnzimmer
icon: mdi:sofa-outline
tap_action:
action: navigate
navigation_path: /lovelace/wohnzimmer
entity: sensor.sensor_wohnzimmer_temperature
label: |
[[[
let temperature = states['sensor.sensor_wohnzimmer_temperature'].state + ' °C';
let humidity = states['sensor.sensor_wohnzimmer_humidity'].state + '%';
let presence = states['binary_sensor.presence_sensor_presence'].state; // Ersetze dies durch deinen tatsächlichen Presence Sensor
if (presence === 'on') {
return temperature + ' | ' + humidity + ' | 🟠';
} else {
return temperature + ' | ' + humidity;
}
]]]
show_label: true
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#pop-up-wohnzimmer-lampen"
entity: light.raum_wohnzimmer
show_name: false
state:
- value: "on"
styles:
card:
- background-color: rgba(255, 152, 0, 0.2)
icon:
- color: rgb(255, 152, 0)
- value: "off"
styles:
card:
- background-color: rgba(96,114,116,0.1)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 12px
- box-shadow: none
icon:
- width: 20px
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#pop-up-wohnzimmer-fenster"
entity: binary_sensor.raum_wohnzimmer
icon: mdi:window-closed-variant
state:
- value: "on"
icon: mdi:window-open-variant
styles:
icon:
- color: var(--primary-color)
card:
- background: rgba(33, 150, 243, 0.1)
show_name: false
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 12px
- box-shadow: none
- background-color: rgba(96,114,116,0.1)
icon:
- width: 20px
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#pop-up-wohnzimmer-fenster"
entity: climate.thermostat_wohnzimmer_2
show_name: false
state:
- value: "off"
styles:
icon:
- color: grey
card:
- background-color: rgba(96,114,116,0.1)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 12px
- box-shadow: none
- background-color: rgba(96,114,116,0.1)
icon:
- width: 20px
styles:
grid:
- grid-template-areas: "\"n btn\" \"l btn\" \"i btn\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px
- border-radius: 12px
custom_fields:
btn:
- justify-content: end
- align-self: start
- margin-left: 8px
name:
- justify-self: start
- align-self: start
- font-size: 14px
- font-weight: 500
- color: var(--primary-text-color)
- margin-left: "-10px"
- margin-top: "-7px"
label:
- justify-self: start
- align-self: start
- font-size: 12px
- opacity: 0.9
- margin-left: "-10px"
- margin-top: 2px
img_cell:
- justify-content: start
- position: absolute
- width: 140px
- height: 140px
- left: 0
- bottom: 0
- margin: 0 0 -30px -20px
- border-radius: 40px
- background: rgba(33, 150, 243, 0.1)
icon:
- width: 90px
- color: rgb(33, 150, 243)
show_state: false
layout_options:
grid_columns: 2
grid_rows: 2.6