Paper button row, hide buttons based on button state

Configuration Frontend
1

I’m trying to to use paper button rows to show me different booleans, but I want some of the buttons to only show when they are active, like the visibility config for cards. Is there anyway to do this on each button inside the card?

2

Use state_styles: built into the card’s features

type: custom:paper-buttons-row
buttons:
  - entity: input_boolean.test
    icon: false
    name: false
    styles:
      button:
        height: 26px
        width: 26px
        border-radius: 4px
    state_styles:
      "on":
        button:
          background-color: lime
      "off":
        button:
          background: none
  - entity: input_boolean.test_2
    icon: false
    name: false
    styles:
      button:
        height: 26px
        width: 26px
        border-radius: 4px
    state_styles:
      "on":
        button:
          background-color: red
      "off":
        button:
          background: none
3

Thanks for the reply!
This will only change the background color of the button, right? I want the button to disappear totally, and just be visible when it is active.

4

Are you saying you want the card to shrink and grow based on the active buttons ?

Providing your current card code would assist.

5

Thanks for the assists!

This is the code. Now everything is visible all the time, but I want the second button to just be visible when the boolean is active. You can say I want the card to shrink and grow based on active buttons, yes.

type: custom:paper-buttons-row
styles:
  display: flex
  flex-direction: row
  flex-wrap: nowrap
buttons:
  - icon: |-
      {% set state=states('input_boolean.noen_hjemme') %}
           {% if state=='on' %}
           mdi:home
           {% else %}
           mdi:home-off
           {% endif %}
    entity: input_boolean.noen_hjemme
    name: false
    state_styles:
      "off":
        button:
          background: "#282828"
        icon:
          color: "#f63d2a"
    tap_action:
      action: call-service
    ripple: none
    styles:
      button:
        background: "#282828"
        width: 34px
        height: 34px
        border-radius: 50%
        z-index: 1
      icon:
        color: "#7bc167"
  - type: custom:button-card
    entity: input_boolean.nattmodus
    name: false
    icon: mdi:weather-night
    styles:
      card:
        - height: 50px
        - width: 50px
        - border-radius: 100%
        - background: "#282828"
        - border: none
      grid:
        - grid-template-columns: 1fr
        - grid-template-areas: "\"i\""
      icon:
        - width: 25px
        - color: "#7bc167"
      img_cell:
        - justify-self: start
        - width: 20px
        - height: 20px
        - background: none
        - padding: 14px
        - margin: "-1px 0 0 1px"
6

As long as you do not need to click it via the paper-button-card, you can use

type: custom:paper-buttons-row
buttons:
  - icon: |-
      {% set state=states('input_boolean.noen_hjemme') %}
           {% if state=='on' %}
           mdi:home
           {% else %}
           mdi:home-off
           {% endif %}
    entity: input_boolean.noen_hjemme
    name: false
    state_styles:
      "off":
        button:
          background: "#282828"
        icon:
          color: "#f63d2a"
    styles:
      button:
        background: "#282828"
        width: 34px
        height: 34px
        border-radius: 50%
      icon:
        color: "#7bc167"
  - type: custom:button-card
    entity: input_boolean.nattmodus
    name: false
    icon: mdi:weather-night
    state_styles:
      "off":
        button:
          display: none
    styles:
      icon:
        - color: "#7bc167"

Untitled video - Made with Clipchamp

7

Thank you so much! That was exactly what I was after! There is no need to click the button, it is just for giving a quick reference at a glance. :grinning:

1 Like