28 lines
1.6 KiB
PHP
28 lines
1.6 KiB
PHP
@props(['variant' => 'secondary', 'icon' => false, 'href' => null, 'size' => 'sm'])
|
|
@php
|
|
// One button style for the whole app — EVERY variant carries a persistent
|
|
// border + background (R10). No borderless variants: low-emphasis actions use
|
|
// `secondary`, destructive ones use `danger-soft` (red-tinted, always — not
|
|
// only on hover). Unknown variants fall back to the bordered `secondary`.
|
|
$variants = [
|
|
'primary' => 'bg-accent text-void hover:bg-accent-bright',
|
|
'accent' => 'border border-accent/25 bg-accent/10 text-accent-text hover:bg-accent/15',
|
|
'secondary' => 'border border-line bg-inset text-ink-2 hover:bg-raised hover:text-ink',
|
|
'danger' => 'bg-offline text-void hover:bg-offline/90',
|
|
'danger-soft' => 'border border-offline/25 bg-offline/10 text-offline hover:bg-offline/15',
|
|
];
|
|
// sm = compact toolbar/row buttons; lg = full-height primary CTA (≥44px touch target, R7).
|
|
$sizes = [
|
|
'sm' => ($icon ? 'h-8 w-8' : 'h-8 px-3').' text-xs',
|
|
'lg' => ($icon ? 'h-11 w-11' : 'h-11 px-4').' text-sm',
|
|
];
|
|
$classes = 'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors '
|
|
.'disabled:opacity-50 disabled:pointer-events-none '
|
|
.($sizes[$size] ?? $sizes['sm']).' '.($variants[$variant] ?? $variants['secondary']);
|
|
@endphp
|
|
@if ($href)
|
|
<a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</a>
|
|
@else
|
|
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes]) }}>{{ $slot }}</button>
|
|
@endif
|