38 lines
1.5 KiB
PHP
38 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.remove wire:target="{{ $action }}" @endif class="flex items-center gap-2">
|
|
{{ $slot->isNotEmpty() ? $slot : $label }}
|
|
</span>
|
|
@if($action)
|
|
<span wire:loading wire:target="{{ $action }}" class="flex items-center justify-center">
|
|
<svg class="animate-spin w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-opacity="0.25"/>
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"
|
|
stroke-dasharray="42.4 56.6" stroke-linecap="round"
|
|
transform="rotate(-90 12 12)"/>
|
|
</svg>
|
|
</span>
|
|
@endif
|
|
</button>
|