40 lines
1.5 KiB
PHP
40 lines
1.5 KiB
PHP
@props([
|
|
'variant' => 'primary',
|
|
'size' => 'md',
|
|
'type' => 'button',
|
|
'loading' => false,
|
|
])
|
|
@php
|
|
$base = 'inline-flex items-center justify-center gap-2 rounded font-semibold transition select-none disabled:opacity-50 disabled:pointer-events-none';
|
|
|
|
$sizes = [
|
|
'sm' => 'px-3 py-1.5 text-sm',
|
|
'md' => 'px-4 py-2.5 text-sm',
|
|
];
|
|
|
|
// Accent buttons use the AA-safe darker fill (#c2560a) so white text passes
|
|
// WCAG AA; #f97316 alone is only ~2.8:1 (design handoff §6.1).
|
|
$variants = [
|
|
'primary' => 'bg-accent-active text-on-accent hover:bg-accent-press',
|
|
'secondary' => 'border border-line-strong bg-surface text-body hover:bg-surface-hover',
|
|
'ghost' => 'text-body hover:bg-surface-hover',
|
|
'danger' => 'bg-danger text-on-accent hover:opacity-90',
|
|
];
|
|
|
|
$classes = $base.' '.($sizes[$size] ?? $sizes['md']).' '.($variants[$variant] ?? $variants['primary']);
|
|
@endphp
|
|
<button
|
|
type="{{ $type }}"
|
|
{{ $attributes->merge(['class' => $classes]) }}
|
|
@disabled($loading)
|
|
@if ($loading) aria-busy="true" @endif
|
|
>
|
|
@if ($loading)
|
|
<svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<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 0 1 8-8V0C5.4 0 0 5.4 0 12h4z"></path>
|
|
</svg>
|
|
@endif
|
|
{{ $slot }}
|
|
</button>
|