36 lines
1.5 KiB
PHP
36 lines
1.5 KiB
PHP
@props([
|
|
'action' => null,
|
|
'label' => 'Speichern',
|
|
'loadingLabel' => 'Lädt...',
|
|
'variant' => 'primary',
|
|
'type' => 'button',
|
|
])
|
|
|
|
@php
|
|
$base = 'relative inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-medium transition disabled:opacity-60 disabled:cursor-not-allowed';
|
|
$variants = [
|
|
'primary' => 'bg-accent-gradient text-white hover:opacity-90',
|
|
'secondary' => 'bg-s2 border border-white/[.06] text-t1 hover:bg-s3',
|
|
'danger' => 'bg-red text-white hover:opacity-90',
|
|
'ghost' => 'text-t2 hover:text-t1 hover:bg-s2',
|
|
];
|
|
$cls = $base . ' ' . ($variants[$variant] ?? $variants['primary']);
|
|
@endphp
|
|
|
|
<button
|
|
{{ $attributes->merge(['type' => $type, 'class' => $cls]) }}
|
|
@if($action) wire:loading.attr="disabled" wire:target="{{ $action }}" @endif
|
|
>
|
|
<span @if($action) wire:loading.class="opacity-40" wire:target="{{ $action }}" @endif class="flex items-center gap-2">
|
|
{{ $slot->isNotEmpty() ? $slot : $label }}
|
|
</span>
|
|
@if($action)
|
|
<span wire:loading wire:target="{{ $action }}" class="absolute inset-0 flex items-center justify-center rounded-lg bg-inherit">
|
|
<svg class="animate-spin h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="none">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
|
</svg>
|
|
</span>
|
|
@endif
|
|
</button>
|