Button cards updated for new dashboard sections?

I’m playing around with the new dashboard sections.
According to my information button-cards should be updated to fit in the sections but they aren’t.

Am i doing something wrong ?

I am also trying to copy/paste a button-card to a new Sections view but I get this message at the bottom of the card:

Visual editor not supported

The visual editor is not available for this type of element.
You can still edit your config using YAML.

and I don’t the 3 tabs (Config / Visibility / Layout) when editing this card.
So I cannot resize the card for instance :frowning:

Do you mean a stock Button card or a custom:button-card?
The official Blog meant the stock one.

custom:button-card like this:

image

type: custom:button-card
entity: input_boolean.mail_present
layout: icon_label
icon: mdi:mailbox
label: |
  [[[
    var status = states["input_boolean.mail_present"].state;
    var arrivalDate = entity.state == 'on' ? states["input_datetime.mail_arrived"].state.split(' ')[1] : '';
    return arrivalDate === '' ? 'No mail' : arrivalDate;
  ]]]
show_state: false
show_label: true
show_name: false
styles:
  card:
    - "--mdc-ripple-color": yellow
    - "--mdc-ripple-press-opacity": 0.5
  icon:
    - color: |
        [[[
          if (entity.state === 'on') return 'yellow';
          else return 'white';
        ]]]
tap_action:
  action: call-service
  service: |
    [[[
      if (entity.state == 'off')
        return 'input_boolean.turn_on';
      else
        return 'input_boolean.turn_off';
    ]]]
  service_data:
    entity_id: input_boolean.mail_present

This is a custom card which may not be adapted to sections yet.
Try card-modding:

      - type: grid
        cards:
          - type: button
            entity: switch.test_switch
            name: stock

          - type: custom:button-card
            entity: switch.test_switch
            name: custom - default
            layout_options:
              grid_columns: 2
              grid_rows: 2

          - type: custom:button-card
            entity: switch.test_switch
            name: custom - modded
            layout_options:
              grid_columns: 2
              grid_rows: 2
            styles:
              card:
                - height: 100%
            card_mod:
              style: |
                :host {height: 100% !important}

          - type: button
            entity: switch.test_switch
            name: stock

image

1 Like

Correct, it’s the stock Button card that is supported.
Do you think the custom button card will be adapted in a future version ?

No idea… It depends on it’s author.
Meanwhile you may use card-mod (+ re-using a code by “include”, “!secret”, “yaml-anchors”), card-mod-themes, button-card-template.

1 Like

Thank you, I will look into card-mod