Lovelace: Button card

Unfortunately no. Have no idea what am I doing wrong. Will come back and try again some days later.
Please, let me know if you find the issue.

Just worked it out - you have to put the buttons within a vertical or horizontal stack.

See this example:

  - title: Experimental
    icon: mdi:test-tube
    background: center / cover no-repeat url("/local/bg3.jpg") fixed
    cards:
      - type: horizontal-stack
        cards:
         - type: "custom:button-card"
           color_type: card
           color: rgba(51, 72, 111, 0.24)
           entity: script.good_morning
           icon: mdi:weather-sunset-up
           name: "Good Morning"
           action: more_info
           show_state: true
           style:
             - text-transform: none
             - color: rgb(7, 57, 66)
             - font-weight: bold
         - type: "custom:button-card"
           color_type: card
           color: rgba(51, 72, 111, 0.24)
           entity: script.home_mode__day
           icon: mdi:weather-sunset-down
           name: "Dusk Lighting"
           action: more_info
           show_state: true
           style:
             - text-transform: none
             - color: rgb(7, 57, 66)
             - font-weight: bold
         - type: "custom:button-card"
           color_type: card
           color: rgba(51, 72, 111, 0.24)
           entity: script.night_night
           icon: mdi:bed-empty
           name: "Night Night"
           action: more_info
           show_state: true
           style:
             - text-transform: none
             - color: rgb(7, 57, 66)
             - font-weight: bold
1 Like

Is anyone using lovelace with ‘Fully Kiosk Browser’?

I’m trying this out, but the custom card .js files don’t seem to be loading. It works on the same device with Chrome.

Is there any method, where after clicking on the button, next button are shown underneath?
Example, after clicking “living room” button, underneath i have buttons from light switches, info from all sensors?

You could do this with the conditional card I think. Take a look at this:

I’d love to use this card with Lovelace but I’m a bit concerned that @kuuji hasn’t been seen on here or updated the code for the past 30 days. Is this our only way to implement buttons using Lovelace? It would be nice if this was a default UI feature as buttons work and feel so much better as an interface to my HA entities (I’m a big fan of Custom UI: Tiles but it’s a huge shame that @eddi89 deleted the github repo). :frowning:

Great Custom Card!
I’m trying to use this to select an option but can’t get it to work really. Have been trying for a while now so reaching out for help:

  • title: light
    icon: mdi:lightbulb-on-outline
    cards:
    • type: “custom:button-card”
      icon: mdi:circle-slice-1
      action: service
      service:
      domain: input_select
      action: select_option
      data:
      entity_id: input_select.light_scene
      option: Kväll

Error: You need to define entity

Have also tried this:

  • title: light
    icon: mdi:lightbulb-on-outline
    cards:
    • type: “custom:button-card”
      icon: mdi:circle-slice-1
      entity: input_select.light_scene
      action: service
      service:
      domain: input_select
      action: select_option
      data:
      option: Kväll

No error - no action

@kuuji Looks like time to submit the card to the official repo and earn some Hacktoberfest credits :slight_smile:

Hey y’all!

Sorry I’ve been away for a while. I’ve been pretty busy during the past few weeks with work, friends visiting from abroad and I got sick pretty bad 2 weeks ago. But things are looking better now and I started to look at the backlog.

@arsaboo I’ll look into opening a PR to the official repo and I’ll probably include a release with some new features at the same time.

Cheers!

I haven’t tried to work with a select. The original target was mostly things with an on and off state and lights.

I probably have to make some small adjustment in the code to support that. In the meantime maybe you can map the button to an input boolean that triggers the select_option.

What prevents you from using the button at this time?

I think fully kiosk browser doesn’t support html custom components which I make use of for this module.

I personally just use chrome, you can add a shortcut to your homescreen from chrome and that shortcut will open home assistant in fullscreen, works well for me.

Right now the more-info action always trigger the entity specified on the button. It shouldn’t too hard for me to add an option to override that.

I’ll look into it

2 Likes

I’m not sure we can do templating with lovelace. If you have an example of another module that supports that, could you send it my way?

Customizing the states and their icons is totally possible though, I’ll look into it, I think a lot of people would like that.

I was looking into doing that at the very beginning of this project but it was not very reliable. I’ll try to have a second look now that I’m more comfortable with the code.

1 Like

If you add empty buttons on each side you can get a smaller button. Check github, I have an example with some volume buttons.

I haven’t upgraded yet, I’ll do that soon and look into any issue that shows up.

I think my error turned out to be an issue on my end. Seems like when you upgrade, you have to redo the nest integration every time (I think that someone else has called that out before).

Hi @kuuji, it’s working great at the moment, so more of a feature request really. Would it be possible to allow custom sizing and padding of the buttons please?

For example, this screenshot in my post here: Custom UI: Tiles and another where I created custom graphics with no padding between borders: Custom UI: Tiles

Thanks!

1 Like

Hello,
short question:
is it possible to activate a Scene via a button?
because my script:

          - type: "custom:button-card"
            entity: scene.tv
            icon: mdi:television-box
            name: TV - Scene
            color: rgb(28, 128, 199)

only sends a toggle command which is not usefull here, or?
how can i send a simple “scene_on” with this entity?
because:

          - type: "custom:button-card"
            entity: scene.fernsehen
            icon: mdi:television-box
            name: TV - Scene
            color: rgb(28, 128, 199)
            action: service
            service:
              action: scene.turn_on

is also not working^^
Thx for help