31 lines
1.3 KiB
PHP
31 lines
1.3 KiB
PHP
@props([
|
|
'variant' => 'default',
|
|
'size' => 'md',
|
|
'as' => 'button',
|
|
])
|
|
|
|
@php
|
|
$base = 'inline-flex items-center justify-center gap-2 rounded-lg font-semibold cursor-pointer transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
|
|
|
|
$variants = [
|
|
'default' => 'border border-line bg-bg-soft text-ink-1 hover:bg-bg-tint hover:border-line-strong focus-visible:ring-line-strong',
|
|
'primary' => 'bg-ink-1 text-bg-base border border-ink-1 hover:bg-ink-2 hover:border-ink-2 focus-visible:ring-ink-1',
|
|
'accent' => 'bg-primary text-white border border-primary hover:bg-primary-hover hover:border-primary-hover focus-visible:ring-primary',
|
|
'ghost' => 'bg-transparent text-ink-2 hover:bg-bg-tint border border-transparent focus-visible:ring-line-strong',
|
|
];
|
|
|
|
$sizes = [
|
|
'sm' => 'px-2.5 py-1.5 text-xs',
|
|
'md' => 'px-3.5 py-2 text-sm',
|
|
'lg' => 'px-5 py-2.5 text-sm',
|
|
];
|
|
|
|
$classes = "{$base} {$variants[$variant]} {$sizes[$size]}";
|
|
@endphp
|
|
|
|
@if($as === 'a')
|
|
<a {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</a>
|
|
@else
|
|
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes]) }}>{{ $slot }}</button>
|
|
@endif
|