42 lines
1.7 KiB
PHP
42 lines
1.7 KiB
PHP
@props([
|
|
'variant' => 'primary', // primary, secondary, danger, warning, success, ghost
|
|
'size' => 'md', // sm, md, lg
|
|
'type' => 'button',
|
|
'icon' => null,
|
|
])
|
|
|
|
@php
|
|
$baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-medium text-xs transition-all duration-150 cursor-pointer select-none whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed';
|
|
|
|
$variants = [
|
|
'default' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
|
|
'secondary' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
|
|
'primary' => 'bg-[#4b82f7] text-white border-[#4b82f7] hover:bg-[#3d6fe0] shadow-sm',
|
|
'success' => 'bg-[#21c274] text-white border-[#21c274] hover:bg-[#1da865] shadow-sm',
|
|
'danger' => 'bg-[#ef4a5f] text-white border-[#ef4a5f] hover:bg-[#d63d51] shadow-sm',
|
|
'warning' => 'bg-[#f0a939] text-white border-[#f0a939] hover:bg-[#d8952d] shadow-sm',
|
|
'ghost' => 'bg-transparent text-slate-400 border-transparent hover:bg-white/5 hover:text-slate-200',
|
|
];
|
|
|
|
$sizes = [
|
|
'sm' => 'px-2.5 py-1.5 text-xs',
|
|
'md' => 'px-3 py-1.5 text-[12.5px]',
|
|
'lg' => 'px-4 py-2 text-sm',
|
|
];
|
|
|
|
$classes = implode(' ', [
|
|
$baseClasses,
|
|
$variants[$variant] ?? $variants['secondary'],
|
|
$sizes[$size] ?? $sizes['md'],
|
|
]);
|
|
@endphp
|
|
|
|
<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
|
|
@if($icon)
|
|
<i class="{{ $icon }}"></i>
|
|
@endif
|
|
@if(trim($slot))
|
|
<span>{{ $slot }}</span>
|
|
@endif
|
|
</button>
|