Pase los atributos / props como una matriz.

Quiero usar un array y utilizarlo para llenar los props de un componente Laravel-blade (8.x) dinámicamente. En resumen, algo así:

donde $buttonProps es un array con pares de clave-valor que definen los props y sus valores para que el botón se represente.

El array se vería así: ['label' => 'My Button', 'size' => 'sm', ...]

Aquí hay un ejemplo más detallado de lo que intento hacer:

1. Componente de botón con algunos props

@props([
  'size' => 'md', # sm, md, lg
  'variant' => 'basic', # basic, success, error
  'label' => '',
])

@php
// ... 
@endphp

<button {{="" $attributes-="">merge([ 'class' => '...' ]) }}>
  {!! $label !!}
</button>

2. Button Group: que representará los botones usando un array para sus props

Aquí está la cosa que no funciona: {{ $buttonProps }}. Quiero pasar dinámicamente los props para el botón como un array. Pero esta solución no funciona así. ¿Hay alguna solución para hacerlo de esta manera?

@props([
  'buttons' => []
])

<div class="...">
  @foreach ($buttons as $buttonProps)
    <x-button size="sm" {{="" $buttonprops="" }}=""></x-button>
  @endforeach
</div>

3. Finalmente, cómo utilizaría Button Group en este escenario

Puede notar que paso un prop extra al primer botón. Esa es básicamente la razón por la que necesito un enfoque dinámico ya que no conozco todos los props pasados en mi escenario de la vida real.


<x-button-group
:buttons="[
[
'label' => 'Export',
'hello' => 'world',
'type' => 'button',
'onclick' => '() => alert(\'hello world\')',
],
[
'label' => 'Main action',
'variant' => 'accent',
]
]"
/>


Nota: sé que podría hacer que este ejemplo funcione utilizando slots aquí, pero mi ejemplo de la vida real es un poco diferente en cuanto a los requisitos. Usé Button y ButtonGroup como ejemplo para ilustrar mi problema.