Lovelace: Button card

Share your Projects! Dashboards & Frontend
558

I added the github url but custom updater still shows it as version 0.0.2. How would i go about updating this card?

559

I‘m facing one small problem with the button card: On my iOS devices the icon and the text displayed on the button are sometimes misaligned. They are not centered relative to the edges of the button. On my Macbook in Firefox everything is perfectly aligned. Does anyone know what the problem might be?

560

In the latest PR, I’ve added support for styling definition in each state

Ex:

              - type: "custom:button-card"
                entity: sensor.temperature
                show_state: true
                state:
                  - value: 15
                    operator: '<='
                    color: blue
                    icon: mdi:thermometer-minus
                  - value: 25
                    operator: '>='
                    color: red
                    icon: mdi:thermometer-plus
                  - operator: 'default' # used if nothing matches
                    color: yellow
                    icon: mdi: thermometer
                    style:
                      - opacity: 0.5

@iantrich could you have a look please? It would also close the issue #41

561

A question for everyone using this card. :slightly_smiling_face:

I think it’s kind of confusing to have state, color and color_off.

- type: "custom:button-card"
  entity: switch.main
  show_state: true
  color: red
  color_off: green

Is now redundant with:

- type: "custom:button-card"
  entity: switch.main
  show_state: true
  state:
    - value: 'on'
      color: red
    - value: 'off'
      color: green

I think the second one is more clear and works with any type of entity although this would be a breaking change to deprecate color_off. Thoughts?

562

I agree the second approach seems better.

It would be only a minor inconvenience for us existing users but would make things more standardized and easier to understand, especially for new users. So I think it’s worth doing.

563

@iantrich, ignore the previous PR, I’ve issued a new one with more stuff but some breaking changes (for a better future :slight_smile: )

If you could have a look and let me know what you think please.

Breaking Changes

  • color_off is now deprecated, use state instead if you want to redefine the color when off
    Instead of:
      - type: "custom:button-card"
    name: Switch
    entity: switch.main
    color: red
    color_off: green
    Use:
      - type: "custom:button-card"
    name: Switch
    entity: switch.main
    color: red
    state:
      - value: 'off'
        color: green
    Or:
      - type: "custom:button-card"
    name: Switch
    entity: switch.main
    state:
      - value: 'off'
        color: green
      - value: 'on'
        color: red
  • default_color is deprecated as it seems redundant with color (when light is not rgb). For rgb light, you can still define a specific color for the off state for example.
  • service has been deprecated in favor of tap_action, see below
  • action has been replaced by tap_action to mimic the default button card and allow for future options like hold_action
  • more_info renamed to more-info, more_info still works
  • service now takes the full service name light.turn_on
  • Add default entity icon support, Fix #53, add show_icon to decide whether to display the icon or not

Others

  • blink animation support
    blink-animation
  • :fire: tap_action supports navigate. Fix #75
  • :fire: Support for style definition in state. Fix #41
  • Disable click when not needed
  • Refactored the code for faster rendering
  • Documentation update
  • Fix #71

Thanks.

5 Likes
564

I like this a lot. Much easier to understand. It would also be awesome to be able to change the Name based on state if that’s possible.

565

I’ll try to check it out tonight :+1:

566

Omg, best news for this card in months. I can’t wait for the hold_action to become available.

Great work!

567

Is font-size supposed to work in style? I have the following and changing font-size: 12px to font-size: 15px has no effect (in fact, it stays the same even if I remove it).

          - type: "custom:button-card"
            entity: switch.rpi_aiy
            name: RPi AIY
            icon: mdi:raspberry-pi
            color: rgb(250, 218, 79)
            color_type: icon
            style:
              - font-size: 12px
              - text-transform: capitalize
568

@arsaboo, this will be fixed with the latest PR, there’s already a bug opened here: https://github.com/custom-cards/button-card/issues/71

1 Like
569

Perfect…looking forward to it.

570

I’m okay with javascript (pure javascript) but I’m really bad at CSS, HTML and javascript combined :sweat_smile: I’m definitely already looking into hold_action but it might take a bit more time :blush:
Please hold on!

571

I have worked around this by using the core entity button with a state switch card. But it added over 1000 lines of code to achieve it. So I am in no hurry as it works fine now. But I would love to minimize my code when possible.

So no worries here. Great work still!

572

I’ve decided to give this card another go now someone is enhancing it.

I have it in a horizontal stack with 2 of the core buttons and with the recent updates, the size of this button is now taller than the core ones.
image

Is there any reason the size of the button is different to core?

573

@DavidFW1960, this should be fixed in the latest PR :slight_smile:

2 Likes
574

Awesome! I had considered this to be abandoned before you came along! Thanks a lot!

575

I’ve added blink animation support in the PR, let’s wait for the merge to happen :slight_smile:
blink-animation

6 Likes
576

@RomRider you are a rock star!

1 Like
577

So I loaded the card from the PR because it’s not merged yet and it looks great! Fixed the layout issue and works as expected. Thanks!