Using a slot with a livewire component

Hi,

I have a livewire componant where I would like pass in some html so that I can have a different call to action button based on where I am on my site.

So something like this, but with a livewire component. I'm not sure that its supported.

<x-modal>
    <x-slot name="button">
         <button>Send Something</button>
    </x-slot>
</x-modal>

tisuchi

3 years ago

Level 70

@rg83 I think you can achieve a similar effect by passing a variable to the component and using that variable to conditionally render the desired HTML.

For example, in your blade template you can pass a variable to the component like this:

<livewire:my-component button-text="Send Something" />

And in your Livewire component's render method you can use this variable like this:

<button>{{ $buttonText }}</button>

rg83

3 years ago

Level 4

@tisuchi Hi. Thank you for replying.

I've thought of this, but I guess my issue is that my Call to Action can be very different. In some cases its just a button with text. In another I might use an image as a button, which is why I wanted to have the slotting.

Please or to participate in this conversation.