@props([
    'variant' => 'primary',
    'type' => 'button',
    'loading' => false,
    'disabled' => false,
])
@php($variants = [
    'primary'   => 'bg-linear-to-r from-maroon to-maroon-light text-white shadow-sm hover:opacity-95 focus-visible:ring-maroon',
    'gold'      => 'bg-linear-to-r from-gold to-gold-light text-maroon shadow-sm hover:opacity-95 focus-visible:ring-gold',
    'secondary' => 'bg-white text-ink ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400 dark:bg-slate-900 dark:text-slate-100 dark:ring-slate-700 dark:hover:bg-slate-800',
    'danger'    => 'bg-red-600 text-white shadow-sm hover:bg-red-700 focus-visible:ring-red-600',
    'ghost'     => 'text-slate-600 hover:bg-slate-100 focus-visible:ring-slate-400 dark:text-slate-300 dark:hover:bg-slate-800',
])
<button type="{{ $type }}" {{ $attributes->merge([
        'class' => 'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition '
            .'focus:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 '
            .$variants[$variant],
    ]) }} @disabled($disabled || $loading)>
    @if ($loading)
        <x-loading size="sm" />
    @endif
    {{ $slot }}
</button>