@props([
    'variant' => 'primary', // primary, secondary, outline, ghost, danger
    'size' => 'md', // sm, md, lg
    'type' => 'button',
    'loading' => false,
    'disabled' => false,
    'icon' => null,
    'iconPosition' => 'left'
])

<button
    type="{{ $type }}"
    {{ $attributes->merge([
        'class' => 'kmc-btn kmc-btn--' . $variant . ' kmc-btn--' . $size . ($loading ? ' kmc-btn--loading' : '')
    ]) }}
    @if($loading || $disabled) disabled @endif
>
    @if($loading)
        <span class="kmc-btn__spinner"></span>
    @elseif($icon && $iconPosition === 'left')
        <iconify-icon icon="{{ $icon }}" class="kmc-btn__icon kmc-btn__icon--left"></iconify-icon>
    @endif

    <span class="kmc-btn__text">{{ $slot }}</span>

    @if($icon && $iconPosition === 'right' && !$loading)
        <iconify-icon icon="{{ $icon }}" class="kmc-btn__icon kmc-btn__icon--right"></iconify-icon>
    @endif
</button>