Lovelace: Button card

[teamRibcage]

@Jordi83

I don’t think tap_action allows templating in its configuration

I was starting to think that might just be the case as well (or I’m just not smart enough to figure it out )

Not a bad idea with the double_tap_action! That’s a function I don’t often think of using. The original idea behind the variable is a single tap switch that will either turn off the light if it’s on, or turn it on while simultaneously clearing out whatever settings were stored from it’s last use. That, and a little furthering of my (clearly lacking ) programming skills!
Thanks for your reply!

[Jordi83 (Jordi B.)]

I’ve been thinking about this for a bit and you should be able to get what you want by creating 2 scripts. One that turns off the light and one that turns it on with the brightness and color temp parameters.
You can use the call-service tap action with a data template to turn on either script depending on the state of the light. The tap action should look something like this:

tap_action: 
  action: call-service
  service: script.turn_on
  data_template:
    entity_id: >-
    {% if is_state('light.den_lamp', 'off') %}
        script.script2      
    {% elif is_state('light.den_lamp', 'on') %}
        script.script1
    {% endif %}

Like I said I’m not 100% sure if templates are allowed in tap_action but you could give it a try!

[parautenbach (Pieter Rautenbach)]

@teamRibcage to add on to what’s already been said and similar to @Jordi83’s suggestion, I created my own toggle script so that a can specify a light profile for use with the custom button card.

toggle_light:
  # todo: timer variable?
  description: "Toggle a light using the specified profile when turned on"
  fields:
    light:
      description: "A light entity"
      example: "light.foyer_light"
    profile:
      description: "A light profile"
      example: "normal/night/security"
  mode: parallel
  sequence:
    - choose:
        - conditions:
            - condition: template
              value_template: "{{ is_state(light, 'off') }}"
          sequence:
            - service: light.turn_on
              target:
                entity_id: "{{ light }}"
              data:
                profile: "{{ profile }}"
      default:
        - service: light.turn_off
          target:
            entity_id: "{{ light }}"

            tap_action:
              haptic: light
              action: call-service
              service: script.toggle_light
              service_data:
                light: light.foyer_light
                profile: normal
            double_tap_action:
              haptic: medium
              action: call-service
              service: script.toggle_light
              service_data:
                light: light.foyer_light
                profile: night

[teamRibcage]

@parautenbach // @Jordi83 - There are some good ideas in both of those answers, and even more importantly they’ve helped me learn a little more about the syntax. Thank you!!

[miannelli516 (Mike IT)]

@CDRX2

browser_mod.popup

Thanks so much for your response! i tried making that change to the code and it doesn’t seem to do anything. no sure if i missed something? any assistance you can provide is extremely apricated!!

Here is a screenshot of what the code looked like before i made the change:

here is what it looks like after i made the change:

[miannelli516 (Mike IT)]

I figured it out!! their was a part in the code all the way at the bottom that said

 deviceID:
            - this

i changed that to

command: popup

you guys are awesome!! thank you all so much for all your help!!!

[miannelli516 (Mike IT)]

Hi Guys,
im trying to remove the Temperature and humidity for some of my cards as not all of my rooms in my house have temperature sensors. ( i pasted the code in my previous post 2 days ago). every time i remove it from the code it causes the buttons at the button to shift and bunch together. how can i hide or remove without causing issues with the buttons on the bottom of the card?

[lpt2007]

How to correctly read attribute state from entity in JSTemplate.

I try like this but not working:

                  - template:
                      - ventilo_buttons
                    variables:
                      entity: fan.haos_vir_balcony_light_n_fan
                      entity_light: light.haos_vir_balcony_light_n_fan
                      name: Balkon
                    type: custom:button-card

      [[[ 
          if (entity.state == 'off'){
            return 'Off' + ' • ' + states[variables.entity].attributes.percentage + '%';
          } else {
            return states[variables.entity].attributes.percentage + '%';
          }
      ]]]

Error:

ButtonCardJSTemplateError: TypeError: Cannot read property 'entity' of undefined in 'if (entity.state == 'off'){ return 'Off' + ' • ' + states[variables.entity].attributes.perce...'

[lpt2007]

Strange problem JSTemplate:

this JSTemplate works without problem:

  outlet:
    tap_action:
      action: more-info
    label: |-
      [[[ if (entity.state =='on')
          var etat = "Vklopljen • " + states[variables.var_sensor_power].state + "W"; 
          else
          var etat = "Izklopljen";
        return etat ; ]]]

Card:

                  - entity: switch.haos_vir_halway_climate
                    variables:
                      var_sensor_power: sensor.haos_vir_halway_climate_energy_power
                    name: Klima
                    template: 
                      - icon_info_bg
                      - outlet
                    type: 'custom:button-card'

and this JSTemplate is similar and won’t work:

  ventilo:
    tap_action:
      action: more-info
    icon: mdi:dome-light
    template: yellow
    label: |-
      [[[ if (entity.state =='on')
          var etat = "Vklopljen • " + states[variables.var_fan].state; 
          else
          var etat = "Izklopljen• " + states[variables.var_fan].state;
        return etat ; ]]]

card:

                  - template: ventilo_buttons
                    variables:
                      var_fan: fan.haos_vir_balcony_light_n_fan
                      var_light: light.haos_vir_balcony_light_n_fan
                      name: Balkon
                    type: custom:button-card

Error:

ButtonCardJSTemplateError: TypeError: Cannot read property 'var_fan' of undefined in 'if (entity.state =='on') var etat = "Vklopljen • " + states[variables.var_fan].state; els...'

what is the difference?

[paddy0174 (Patrick)]

You don’t have an entity set in your second card. I’m not sure, if this is the reason for your error, as it states var_fan is undefinied…

[lpt2007]

If I do like this:

                  - type: custom:button-card
                    entity: light.haos_vir_balcony_light_n_fan
                    variables:
                      var_fan: fan.haos_vir_balcony_light_n_fan
                    template: ventilo_buttons

  ventilo:
    tap_action:
      action: more-info
    icon: mdi:dome-light
    template: yellow
    label: |-
      [[[ if (entity.state =='on')
          var etat = "Vklopljen • " + states[variables.var_fan].state; 
          else
          var etat = "Izklopljen• " + states[variables.var_fan].state;
        return etat ; ]]]

I get error:

ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'if (entity.state =='on') var etat = "Vklopljen • " + states[variables.var_fan].state; els...'

[pedolsky]

There’s only template: ventilo, not ventilo_buttons.

[Jordi83 (Jordi B.)]

You’re most welcome. I’m glad I can finally give something back to the community that helped me out so many times in the past.

[noesbwi]

Hi Tom.

Could you please to show your card config for doing this?
The glowing box is awsome

[tom_l]

Sure see here:

Lovelace light control ideas wanted

[Screenshot_2021-04-27 Overview - Home Assistant] Card config entities: - type: 'custom:hui-element' card_type: horizontal-stack cards: - entity: light.lifx_top_of_stairs template: light_button type: 'custom:button-card' - entity: light.lifx_bottom_of_stairs name: Stairs template: light_button type: 'custom:button-card' - entity: light.lifx_hallway template: light_button type: 'custom:button-card' - entit…

[noesbwi]

Thank you very much…

[noesbwi]

Hi Tom

Is there any templates for button_card_templates other than light_button?

[noesbwi]

Hi Luxor73

Could you please to show your card config for doing this?
The slider for light entities looks cool…

[tom_l]

I have a quite a few.

Formatted for desktop:

button_card_templates:
  binary_sensor_button:
    aspect_ratio: 4/3
    hold_action:
      action: none
    label: |
      [[[ entity.last_changed ]]]
    show_last_changed: true
    show_name: true
    show_state: true
    state:
      - styles:
          icon:
            - color: var(--paper-item-icon-active-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'on', 'disarmed','home'] ]]]
      - styles:
          state:
            - color: var(--secondary-text-color)
        value: 'off'
      - icon: mdi:alert
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"n n n" "i s s" "l l l"'
        - grid-template-rows: auto 33% auto
        - grid-template-columns: 33% auto auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - margin: 0% 0% 0% 0%
      label:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: left
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
      state:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 3px
        - color: var(--secondary-text-color)
    tap_action:
      action: more-info
  day_button:
    color_type: icon
    hold_action:
      action: none
    show_label: false
    show_name: true
    show_state: false
    state:
      - icon: mdi:checkbox-marked-circle
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          name:
            - color: var(--primary-text-color)
        value: 'on'
      - icon: mdi:cancel
        styles: null
        value: 'off'
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 0px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i" "n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: auto
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  dehum_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--button-card-light-color)
        value: 'Off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border: solid 1px var(--paper-item-icon-active-color)
        - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--paper-item-icon-active-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
  icon_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  light_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          label:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - color: var(--button-card-light-color-no-temperature)
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
    tap_action:
      action: toggle
  menu_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  picture_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      entity_picture:
        - width: 100%
        - height: 100%
        - object-fit: contain
    tap_action:
      action: call-service
  switch_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--button-card-light-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  vacuum_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: true
    show_name: true
    show_state: true
    state:
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: cleaning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #ff0000'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: '#ff0000'
        value: error
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: idle
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: docked
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: paused
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: returning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
        value: error
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unknown
    styles:
      card:
        - border: 'solid 1px #7f7f7f'
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "l l l" "n n n"'
        - grid-template-rows: 33% auto auto
        - grid-template-columns: 33% auto auto
      icon:
        - color: '#ff0000'
        - value: mdi:alert
        - width: 28px
        - padding: 0px 0px 0px 0px
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - vaule: Lost
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
    tap_action:
      action: more-info

Formatted for Mobile displays:

button_card_templates:
  binary_sensor_button:
    aspect_ratio: 1/1
    hold_action:
      action: none
    label: |
      [[[ entity.last_changed ]]]
    show_last_changed: true
    show_name: true
    show_state: true
    state:
      - styles:
          icon:
            - color: var(--paper-item-icon-active-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'on', 'disarmed','home'] ]]]
      - styles:
          state:
            - color: var(--secondary-text-color)
        value: 'off'
      - icon: mdi:alert
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"n n n" "i s s" "l l l"'
        - grid-template-rows: auto 33% auto
        - grid-template-columns: 33% auto auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - margin: 0% 0% 0% 0%
      label:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: left
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
      state:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 3px
        - color: var(--secondary-text-color)
    tap_action:
      action: more-info
  day_button:
    color_type: icon
    hold_action:
      action: none
    show_label: false
    show_name: true
    show_state: false
    state:
      - icon: mdi:checkbox-marked-circle
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          name:
            - color: var(--primary-text-color)
        value: 'on'
      - icon: mdi:cancel
        value: 'off'
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 0px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i" "n"'
        - grid-template-rows: auto auto
        - grid-template-columns: auto
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  dehum_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--button-card-light-color)
        value: 'Off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border: solid 1px var(--paper-item-icon-active-color)
        - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--paper-item-icon-active-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
  icon_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  light_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          label:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--button-card-light-color-no-temperature)
        - width: 28px
        - padding: 0px 0px 0px 0px
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
    tap_action:
      action: toggle
  menu_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
        - white-space: normal
    tap_action:
      action: call-service
  picture_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      entity_picture:
        - width: 100%
        - height: 100%
        - object-fit: contain
    tap_action:
      action: call-service
  switch_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--button-card-light-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  vacuum_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: true
    show_name: true
    show_state: true
    state:
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: cleaning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #ff0000'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: '#ff0000'
        value: error
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: idle
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: docked
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: paused
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: returning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
        value: error
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unknown
    styles:
      card:
        - border: 'solid 1px #7f7f7f'
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "l l l" "n n n"'
        - grid-template-rows: 33% auto auto
        - grid-template-columns: 33% auto auto
      icon:
        - color: '#ff0000'
        - value: mdi:alert
        - width: 28px
        - padding: 0px 0px 0px 0px
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - vaule: Lost
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
    tap_action:
      action: more-info

[noesbwi]

Wow…, that looks like a lot to me…
I’m new in home assistant, I will try to learn and understand it.

I really appreciate for sharing me the config and thank you very much…