@props([
    'wire' => 'submit',
    'label' => 'حفظ',
    'loadingText' => 'جاري الحفظ...',
    'class' => 'btn btn-sm btn-primary px-4',
    'icon' => 'fa-save',
])

<button {{ $attributes->merge(['class' => "$class d-inline-flex gap-2 align-items-center"]) }}
    wire:click="{{ $wire }}" wire:loading.attr="disabled" type="button">
    <span wire:loading.remove wire:target="{{ $wire }}">
        <i class="fa {{ $icon }}"></i>
        {{ $label }}
    </span>

    <span wire:loading.class.remove="d-none" wire:target="{{ $wire }}" class="d-none">
        <span class="spinner-border spinner-border-sm" role="status"></span>
        {{ $loadingText }}
    </span>
</button>