Is it possible to turn stop displaying buttons entirely based on state?

[maxshcherbina]

I recently discovered this card and I must say it is fantastic!
One use case that I thought of was to create chips that I can display at the top of my UI. Given this, I would love it for a button to appear/disappear depending on the state of an entity. I'd like for the next button in the row to take its place. Is this currently possible?

My chips:

[jcwillox]

Yep, should be pretty easy with state_styles or by templating the display css property.

- type: custom:paper-buttons-row
  buttons:
    - entity: light.bedroom_light
      state_styles:
        'off':
          button:
            display: none

or with Jinja templates

- type: custom:paper-buttons-row
  buttons:
    - entity: light.bedroom_light
      style:
        button:
          background: black
          display: "{{ is_state(config.entity, 'off') and 'none' }}"
          # display: "{{ is_state('light.bedroom_light', 'off') and 'none' }}"

[maxshcherbina]

Wow Thanks - that is perfect & pretty easy! This is a fantastic piece of work.

I was also wondering if you could recommend a method to make these buttons further dynamic:

1. I would ideally like them to be scrollable (ie you could use your finger to grab and scroll through them - but I think I can probably achieve that with other cards in conjunction with this one)

2. I was also looking at saving space - if there are too many cards showing it would remove the state and leave just the icon (dynamically). I understand you can do this:

    state_styles:
      disarmed:
        state:
          display: none

Or even use a jinja template to display the state if certain conditions are met, (as you've shown above) but it would be great if I could add +1 to a variable each time a button is displayed - and when that number reaches 4 for instance, the state text disappears and youre left with just the icon.

Thanks for your help though, this is already quite an awesome addition to my dashboard!