83 lines
2.7 KiB
PHP
83 lines
2.7 KiB
PHP
|
{{--
|
||
|
|
Button Component
|
||
|
|
|
||
|
|
A button with authorization support, variants, loading states, and icons.
|
||
|
|
|
||
|
|
Props:
|
||
|
|
- type: string - Button type (button, submit, reset)
|
||
|
|
- variant: string - Button style: primary, secondary, danger, ghost
|
||
|
|
- size: string - Button size: sm, md, lg
|
||
|
|
- icon: string|null - Icon name (left position)
|
||
|
|
- iconRight: string|null - Icon name (right position)
|
||
|
|
- loading: bool - Show loading state
|
||
|
|
- loadingText: string|null - Text to show during loading
|
||
|
|
- disabled: bool - Whether button is disabled
|
||
|
|
- canGate: string|null - Gate/ability to check
|
||
|
|
- canResource: mixed|null - Resource to check against
|
||
|
|
- canHide: bool - Hide instead of disable when unauthorized
|
||
|
|
|
||
|
|
Usage:
|
||
|
|
<x-core-forms.button variant="primary" icon="check">
|
||
|
|
Save Changes
|
||
|
|
</x-core-forms.button>
|
||
|
|
|
||
|
|
<x-core-forms.button
|
||
|
|
variant="danger"
|
||
|
|
canGate="delete"
|
||
|
|
:canResource="$model"
|
||
|
|
canHide
|
||
|
|
>
|
||
|
|
Delete
|
||
|
|
</x-core-forms.button>
|
||
|
|
|
||
|
|
{{-- With loading state --}}
|
||
|
|
<x-core-forms.button
|
||
|
|
variant="primary"
|
||
|
|
wire:click="save"
|
||
|
|
wire:loading.attr="disabled"
|
||
|
|
loadingText="Saving..."
|
||
|
|
>
|
||
|
|
<span wire:loading.remove>Save</span>
|
||
|
|
<span wire:loading>Saving...</span>
|
||
|
|
</x-core-forms.button>
|
||
|
|
--}}
|
||
|
|
|
||
|
|
@if(!$hidden)
|
||
|
|
<button
|
||
|
|
type="{{ $type }}"
|
||
|
|
@if($disabled) disabled @endif
|
||
|
|
{{ $attributes->class([
|
||
|
|
'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200',
|
||
|
|
'focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900',
|
||
|
|
'disabled:cursor-not-allowed disabled:opacity-60',
|
||
|
|
$variantClasses,
|
||
|
|
$sizeClasses,
|
||
|
|
]) }}
|
||
|
|
>
|
||
|
|
{{-- Loading spinner (wire:loading compatible) --}}
|
||
|
|
@if($loading)
|
||
|
|
<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
|
|
</svg>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
{{-- Left icon --}}
|
||
|
|
@if($icon && !$loading)
|
||
|
|
<flux:icon :name="$icon" class="w-4 h-4" />
|
||
|
|
@endif
|
||
|
|
|
||
|
|
{{-- Button content --}}
|
||
|
|
@if($loading && $loadingText)
|
||
|
|
{{ $loadingText }}
|
||
|
|
@else
|
||
|
|
{{ $slot }}
|
||
|
|
@endif
|
||
|
|
|
||
|
|
{{-- Right icon --}}
|
||
|
|
@if($iconRight)
|
||
|
|
<flux:icon :name="$iconRight" class="w-4 h-4" />
|
||
|
|
@endif
|
||
|
|
</button>
|
||
|
|
@endif
|