Lovelace: Button card

No card type configured.

  • type: ‘custom:button-card’
    entity: switch.livingroom1
    icon: ‘mdi:light’
    color: ‘rgb(28, 128, 199)’

PS. How do I format my post to keep my code structure? I know its something with ’ ’ ’

Ian

You are a star. Your two liner showed my my mistake.

Every example has “- type: custom:button-card” I changed it to “type: custom:button-card” and I got a simple light button.

All I needed, just so i could see where i am making the mistake.

Thanks A million for the reply.

PS: I am a Systems Engineer and sometimes we all need a persons input from a different perspective to show us our mistakes. No matter how clever you are"

Once again. MUCH APPRECIATED.

1 Like

use backticks

Thanks Ian.

Sorry for going bonkers, but was at the point of phoning an institution for the mad to come and fetch me.

Really appreciate you assistance.

You are a legend.

1 Like

The leading - is for if you’re doing it in the Raw Editor or a ui-lovelace.yaml file. If using the UI Card Editor, the leading - is added for you. A “convenience” that can sometimes lead to confusion :+1:

Now that is something I did not know. Will save me hours of struggling in the future.
That explains some issues that I have had with my project thus far. I usually mix between using the gui, raw and customizer.

Good point that I will remember for the future.

Hey,
I actually started having this double clicking on every button on my iPhone after 3.1.1 release. :smiley:

Either you have a cache issue, or a HACS issue because it seems fixed for other users. Please check that first.

Seems that you were right.
Deleting the browser cache fixed that.

Is it possible to make buttons only clickable (tap_action) if the state is for example ‘on’ ?

template the action to be none if not on or use a script

hell yeah. It works, thanks.

tap_action:
  action: >
      [[[ return (entity.state === 'on') ? 'call-service' : 'none' ]]]
....
1 Like

Sorry to bug again. I have one question. With custom buttons if I use input_datetime.garden1_1 I get the icon but not the option to select/input the time . How do I go about this?

Any help appreciated.

type: vertical-stack
cards:
  - type: 'custom:button-card'
    color_type: label-card
    color: 'rgb(86,89,90)'
    name: Day Selection
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: label-card
        name: Day Selection
      - type: 'custom:button-card'
        title: Select
        entity: input_datetime.garden1_1

Hi, so im quite new to home assistant, but i want to achieve something

I have this simple test

But i want to add this simple line of code, so when i press on the light, i get a slider to increase/decrease brightness

  - type: 'custom:slider-entity-row'
    entity: light.taklampe_entre
    hide_state: true
    full_row: true
    hide_when_off: true

How do i go about doing this?

This is the result i am after, showing on with slider, and when off, slider goes away
2020-01-10 22_03_04-Ability to completely collapse the slider · Issue #65 · thomasloven_lovelace-sli

You can’t. You have to use a different control.

EDIT: It appears as if an update went through and you can now add custom cards to the custom field. Don’t know how to do it yet.

Thanks for the reply Petro. If you find any info please let me know. I will also keep a look out for any info.

I have a simple question but can’t find the answer, sure its here but with 2819 entries not that easy to find…

I have a button that when pressed switches an input boolean to on which in turn triggers several automations. The button basically is my ‘all alarms off button’. The issue is that I also want the color of the icon to change when the alarm is actually ON (switch.aeotec_zw080_siren_gen5_switch_32_0= ‘on’) but obviously I cannot change that color based on the actually entity I’m switching (the input boolean) as this is off. How do I make the icon blink/red when a specific entity is on, and not the entity I want to switch based on the action?

Below is what I have now

  - color: var(--primary-text-color)
    color_off: var(--disabled-text-color)
    color_type: icon
    default_color: var(--primary-text-color)
    entity: input_boolean.allalarmoff
    icon: 'mdi:bell-ring'
    name: SIRENE
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.allalarmoff
      state:
        - color: red
          icon: 'mdi:alert'
          style:
            - animation: blink 2s ease infinite
          value: 'on'
        - color: green
          icon: 'mdi:shield-check'
          operator: default
    type: 'custom:button-card'

This is exactly what I do:

image

I use button-card to display the light details, and light-entity-card to do the slider, both wrapped in a vertical-stack-in-card to seamlessly show them as one card. Not the card expands to show the slider, its not fixed as shown above, its only because one is on and one is off. You can probably play around with things to get it how you want, but this should help get you started.

          ## Floor Lamp
          - type: custom:vertical-stack-in-card
            cards:
            - type: custom:button-card
              entity: light.living_room_lamp
              name: Floor Lamp
              icon: fas:lamp
              show_state: true
              color: auto
              show_last_changed: true
              size: 1.7em
              styles:
                card:
                  - font-size: 11.2px
                  - padding: 16px 16px 0px 16px
                label:
                  - opacity: 0.8
                  - font-size: 11.2px
                state:
                  - font-size: 2.4em
                  - font-weight: 300
                grid:
                  - grid-template-areas: '"i n" "s s" "l l"'
                  - grid-template-columns: 40% auto
                  - grid-template-rows: 1fr min-content min-content
                  - grid-row-gap: 16px
                img_cell:
                  - font-size: 14px
                  - justify-content: left
                icon:
                  - text-align: left
                  - margin-right: 0.6em
                  - margin-left: 0px
                name:
                  - font-size: 16.8px
                  - max-height: 1.4em
                  - min-height: 1.4em
                  - opacity: 0.75
                  - justify-self: end
              state:
                - value: 'off'
                  styles:
                    card:
                      - filter: opacity(50%)
                    icon:
                      - filter: grayscale(100%)
              hold_action:
                action: more-info
            - type: custom:light-entity-card
              entity: light.living_room_lamp
              group: false
              color_wheel: false
              persist_features: false
              header: false
              brightness: true
              color_temp: false
              white_value: true
              color_picker: false
              effects_list: false
              brightness_icon: fas:sun


5 Likes

I’m curious. Why do you even have the input boolean? why not just a service call?

Mhh, don’t know :wink: build this quite a while a go when this button card was not that advanced as it is now…

Been looking as some examples and would expect below to work. When I change the template under Icon to just color: green it all works. With the template it does not even show the button.

Probably something small but I’m stuck.

  - color: var(--primary-text-color)
    color_off: var(--disabled-text-color)
    color_type: icon
    default_color: var(--primary-text-color)
    entity: input_boolean.allalarmoff
    icon: 'mdi:bell-ring'
    name: SIRENE
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.allalarmoff
    styles:
      icon:
        - color: >
            [[[ if (switch.fibaro_system_fgwpef_wall_plug_gen5_switch.state
            =='on') return 'green'; return 'grey'; ]]]
    type: 'custom:button-card'