Name and value in switch buton

Hello,
I am developing buttons to be able to raise and lower my roller shutters. For this I created this code

type: vertical-stack
title: Volets
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_md
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            name: Fermé
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            name: Ouvert
            icon: mdi:window-shutter-open

Capture d’écran 2023-07-19 à 12.44.44

In my button, I can’t put the name of the button! For example, I’m looking to put the word “Garage” like the image below!
Capture d’écran 2023-07-19 à 12.43.26

Is it possible with switch ?

“name:”

I tried, but it doesn’t work!

type: vertical-stack
title: Volets
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_md
        name: Garage
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            name: Fermé
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            name: Ouvert
            icon: mdi:window-shutter-open

i don’t see that in your card ! ?

under - type same intend as tap_action: and entity:

Ahh i see now

EDIT: but you are changing it with your state !

You need to add “show_state”, so you get both “name and state”, and template the state value

That’s to say ?

This change the “name” of the card/entity , you need to change the State - value ( and add show_state ) please have a look att some of the examples in the Doc

Yes I agree, but I need this name value to change the state of my pane (open or closed)

no you don’t you are changing THE NAME, Not the VALUE , please add “show_state” under the entity, above name(garage), then you’ll see , then remove name under state:, and you have your garage, AND state value (on/off) , it is these values you have to change using “state_display”

state:
 - value: on ... means when value is on, then color red, the name is Ferme(NOT the value, on)
type: custom:button-card
tap_action:
  action: toggle
entity: switch.volet_hangar_md
show_state: true
styles:
  card:
    - width: 80px
    - height: 80px
  icon:
    - width: 40px
    - height: 40px
state:
  - value: 'on'
    color: red
    icon: mdi:window-shutter
  - value: 'off'
    color: white
    icon: mdi:window-shutter-open

Capture d’écran 2023-07-19 à 15.29.05
The problem is that show_state indicates “off” while the pane is open

yes, then you have to add “state_display:” same intend as the entity( i.e under the entity, )

state_display: |
   [[[ 
     if (entity.state == 'on') return 'Opened'; return 'Closed';
     ]]]

… or the other way around :slight_smile:

Great it works :+1:
THANKS

1 Like

I will have another question, is it possible to modify the #state div?
I would like to decrease the font size

yes, with/under style, add name: - font-size, state: - font-size

Please read the examples in the url above

When CSS/Template options in a card is not enough, you can install Card_Mod( Tons of examples in this Forum )

like that ?

type: custom:button-card
card_mod:
  style: |
    #state {
      font-size:10px
    }
tap_action:
  action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
  [[[ 
    if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
    ]]]
name: Garage
styles: 
  card:
    - width: 80px
    - height: 80px
  icon:
    - width: 40px
    - height: 40px
state:
  - value: 'on'
    color: red
    icon: mdi:window-shutter
  - value: 'off'
    color: white
    icon: mdi:window-shutter-open

nooo, under styles: as you already have , if you had bothered to look in the DOC-EXAMPLES , you would know that this card has comprehensive Style options, with CSS/Templating(which you have already added some)

Sorry, but I don’t understand the process. I have successfully installed card_mod via HACS

I tried to see if anything move with this code, but nothing moves

 - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_hangar_md
        card_mod:
         style: |
           ha-card {
              font-family: "Lucida Handwriting";
              --card-primary-font-size: 10px
           }
      
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open

Don’t use card_mod, you don’t need card_mod,(noone told you to use card_mod for this) read my previous post

i think i found

type: custom:button-card
tap_action:
  action: toggle
entity: switch.volet_hangar_md
show_state: true
state_display: |
  [[[ 
    if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
    ]]]
styles:
  card:
    - width: 80px
    - height: 80px
    - font-size: 12px
  icon:
    - width: 40px
    - height: 40px
state:
  - value: 'on'
    color: red
    icon: mdi:window-shutter
  - value: 'off'
    color: white
    icon: mdi:window-shutter-open

ok, and if you want different size on name/state , then you add name: (and) state: … as you have card: and icon under styles: where you define CSS like width, height, color, font-type, etc, then you can specify colors/font-size/bold/type etc, individually for “Name” and “State:”

Ok thank you very much it works great :+1:
On the other hand I have another question. I would now like to put my buttons in a column of 4 (like this image)

I added columns: 4 to my code but it doesn’t work!

type: vertical-stack
title: Volets
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        name: Garage
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
      - type: custom:button-card
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:window-shutter
        name: Bureau
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_stop
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:stop
        name: STOP
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_hangar_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
      - type: custom:button-card
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:window-shutter
        name: Hangar
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_hangar_stop
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:stop
        name: STOP
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_garage_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
      - type: custom:button-card
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:window-shutter
        name: Garage
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_garage_stop
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:stop
        name: STOP
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_baie_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
      - type: custom:button-card
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:window-shutter
        name: Baie
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_baie_stop
        styles:
          card:
            - width: 80px
            - height: 80px
          icon:
            - width: 40px
            - height: 40px
        icon: mdi:stop
        name: STOP
    columns: 4