Button Card - Display %

Configuration Frontend
1

Hi Team.

I have this button card that is reading the value of a helper group for battery levels. The card is displaying for example 56 and its reading that value from the helper. The issue is its not displaying the % so 56% for example.

Any suggestions?

type: custom:button-card
entity: sensor.group_batteries_up_downstairs
name: Battery Level
show_state: true
show_name: false
state:
  - value: "100"
    styles:
      card:
        - background-color: green
        - color: white
        - height: 50px
        - width: 50px
    icon: mdi:battery
    state: |
      [[[
        return entity.state + ' %';
      ]]]
  - operator: <
    value: "10"
    styles:
      card:
        - background-color: red
        - color: white
        - height: 50px
        - width: 50px
        - animation: flashing
    icon: mdi:battery-alert
    state: |
      [[[
        return entity.state + ' %';
      ]]]
  - operator: <
    value: "15"
    styles:
      card:
        - background-color: red
        - color: white
        - height: 50px
        - width: 50px
    icon: mdi:battery-alert
    state: |
      [[[
        return entity.state + ' %';
      ]]]
  - operator: <
    value: "50"
    styles:
      card:
        - background-color: orange
        - color: black
        - height: 50px
        - width: 50px
    icon: mdi:battery-50
    state: |
      [[[
        return entity.state + ' %';
      ]]]
tap_action:
  action: navigate
  navigation_path: /dashboard-ios/batteries
styles:
  card:
    - border-radius: 10px
    - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
  name:
    - font-weight: bold
  state:
    - font-size: 16px
  animations:
    flashing:
      animation: blink
      duration: 1s
      iterations: infinite
2

leave the state without the fancy + ’ %’
and add a line
unit: ‘%’

3

Thank you for your reply. much appreciated