Want to share my config to make sonos playlist buttons in dashboard as the picture shows:

How to?

• enable “sonos_favorites” sensor in settings > devices > entities
• goto hacs and install frontend auto-entities card
• goto hacs and install button-card
• put the below in your dashboard

      - type: custom:auto-entities
        view_layout:
          grid-area: mb
        card:
          square: true
          type: grid
          columns: 5
        card_param: cards
        sort:
          method: state
        filter:
          template: >
            {% for item in state_attr('sensor.sonos_favorites',
            'items').values() %} {{
                    {
                        'entity': 'null',
                        'name': item,
                        'icon' : 'mdi:music',
                        'type': 'custom:button-card',
                        'template': 'base_music_switch',
                        'tap_action' :
                        {
                          'action': 'call-service',
                          'service': 'script.multimedia_sonos_play_selected_playlist',
                          'service_data': 
                           {
                             'media_player': 'media_player.sonos_livingroom',
                             'source': item 
                             
                           }                  
                          }
                    }   
            }}, {% endfor %}

• put a template for the custom button in your lovelace file to format the button

  base_music_switch:
    show_icon: false
    show_state: false
    show_name: true
    aspect_ratio: 1/1
    tap_action:
      haptic: success
    styles:
      card:
        - border: transparent
        - border-radius: 8px
        - box-shadow: |
            [[[
                if (states['sensor.theme_style'].state == 'light')
                {    
                    return ' -3px -3px 3px rgb(255, 255, 255, 0.5),  3px 3px 3px rgb(0,0,0,0.05), inset 1px 1px 2px rgb(255, 255, 255, 0.8), inset -1px -1px 2px rgb(0,0,0,0.05)';                                        
                }
                else
                { 
                    return ' -2px -2px 3px rgb(102, 102, 102, 0.1),  3px 3px 3px rgb(0,0,0,0.9), inset 1px 1px 2px rgb(102, 102, 102, 0.3), inset -1px -1px 2px rgb(0,0,0,0.35)';                          
                }
            ]]]
      lock:
        - height: 10px
        - width: 10px
        - justify-content: flex-end
        - align-items: flex-end
      grid:
        - grid-template-areas: |
            "n"
        - grid-template-columns: 1fr
        - grid-template-rows: auto
      name:
        - padding-left: 5px
        - padding-right: 5px
        - width: 90%
        - word-break: break-word
        - overflow: hidden
        - line-height: 1.3
        - display: block;/* or inline-block */
        - text-overflow: ellipsis
        - max-height: 3.9em
        - white-space: normal
        - color: var(--divider-color)
    extra_styles: >
      @media (min-width: 1800px) { #name{ font-size: 60%; } } @media (max-width:
      1800px) { #name{ font-size: 60%; }  } @media (max-width: 1000px) { #name{
      font-size: 60%; } } 

• when you click an icon a script is started
• add a script, my example is highly customized to my auto follow feature that I implemented

alias: multimedia_sonos_play_selected_playlist
sequence:
  - choose:
      - conditions:
          - condition: template
            value_template: >
              {{ states('input_boolean.multimedia_' + media_player |
              replace('media_player.sonos_','') + '_automusic') == 'on' }}
        sequence:
          - service: input_boolean.turn_off
            data: {}
            target:
              entity_id: input_boolean.multimedia_sonos_autofollow
          - service: media_player.shuffle_set
            data:
              shuffle: true
            target:
              entity_id: |
                {{ media_player }}
          - service: media_player.select_source
            data:
              source: |
                {{ source }}
            target:
              entity_id: |
                {{ media_player }}
          - delay:
              hours: 0
              minutes: 0
              seconds: 4
              milliseconds: 0
          - service: input_boolean.turn_on
            data: {}
            target:
              entity_id: input_boolean.multimedia_sonos_autofollow
    default:
      - service: media_player.shuffle_set
        data:
          shuffle: true
        target:
          entity_id: |
            {{ media_player }}
      - service: media_player.select_source
        data:
          source: |
            {{ source }}
        target:
          entity_id: |
            {{ media_player }}
mode: single