@props(['size'=>'size-5'])
<button wire:loading.attr="disabled"
    {{ $attributes->merge(['class' => 'btn btn-primary btn-add-event flex w-auto justify-center rounded-lg bg-success-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-success-600 sm:w-auto']) }}>

    <span wire:loading.remove wire:target='{{ $attributes->wire('click')->value() }}' class="inline-flex w-auto items-center gap-2">
        {{ $slot }}
    </span>
    <svg wire:loading wire:target='{{ $attributes->wire('click')->value() }}' class="fill-white {{ $size ?? 'size-5' }}"
        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <circle cx="4" cy="12" r="3" opacity="1">
            <animate id="spinner_qYjJ" begin="0;spinner_t4KZ.end-0.25s" attributeName="opacity" dur="0.75s"
                values="1;.2" fill="freeze" />
        </circle>
        <circle cx="12" cy="12" r="3" opacity=".4">
            <animate begin="spinner_qYjJ.begin+0.15s" attributeName="opacity" dur="0.75s" values="1;.2"
                fill="freeze" />
        </circle>
        <circle cx="20" cy="12" r="3" opacity=".3">
            <animate id="spinner_t4KZ" begin="spinner_qYjJ.begin+0.3s" attributeName="opacity" dur="0.75s"
                values="1;.2" fill="freeze" />
        </circle>
    </svg>
</button>