@php
use Filament\Support\Enums\ActionSize;
use Filament\Support\Enums\IconPosition;
use Filament\Support\Enums\IconSize;
@endphp
@props([
'badge' => null,
'badgeColor' => 'primary',
'color' => 'primary',
'disabled' => false,
'form' => null,
'grouped' => false,
'icon' => null,
'iconAlias' => null,
'iconPosition' => IconPosition::Before,
'iconSize' => null,
'keyBindings' => null,
'labeledFrom' => null,
'labelSrOnly' => false,
'outlined' => false,
'size' => 'md',
'tag' => 'button',
'tooltip' => null,
'type' => 'button',
])
@php
$stringSize = match ($size) {
ActionSize::ExtraSmall => 'xs',
ActionSize::Small => 'sm',
ActionSize::Medium => 'md',
ActionSize::Large => 'lg',
ActionSize::ExtraLarge => 'xl',
default => $size,
};
$buttonClasses = \Illuminate\Support\Arr::toCssClasses([
...[
"fi-btn fi-btn-size-{$stringSize} relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus:ring-2 disabled:pointer-events-none disabled:opacity-70",
'flex-1' => $grouped,
'rounded-lg' => ! $grouped,
is_string($color) ? "fi-btn-color-{$color}" : null,
match ($size) {
ActionSize::ExtraSmall, 'xs' => 'gap-1 px-2 py-1.5 text-xs',
ActionSize::Small, 'sm' => 'gap-1 px-2.5 py-1.5 text-sm',
ActionSize::Medium, 'md' => 'gap-1.5 px-3 py-2 text-sm',
ActionSize::Large, 'lg' => 'gap-1.5 px-3.5 py-2.5 text-sm',
ActionSize::ExtraLarge, 'xl' => 'gap-1.5 px-4 py-3 text-sm',
},
'hidden' => $labeledFrom,
match ($labeledFrom) {
'sm' => 'sm:inline-grid',
'md' => 'md:inline-grid',
'lg' => 'lg:inline-grid',
'xl' => 'xl:inline-grid',
'2xl' => '2xl:inline-grid',
default => 'inline-grid',
},
],
...(
$outlined ?
[
'fi-btn-outlined ring-1',
match ($color) {
'gray' => 'text-gray-950 ring-gray-300 hover:bg-gray-400/10 focus:ring-gray-400/40 dark:text-white dark:ring-gray-700',
default => 'text-custom-600 ring-custom-600 hover:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-500',
},
] :
[
'shadow-sm' => ! $grouped,
...match ($color) {
'gray' => [
'bg-white text-gray-950 hover:bg-gray-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10',
'ring-1 ring-gray-950/10 dark:ring-white/20' => ! $grouped,
],
default => [
'bg-custom-600 text-white hover:bg-custom-500 dark:bg-custom-500 dark:hover:bg-custom-400',
'focus:ring-custom-500/50 dark:focus:ring-custom-400/50' => ! $grouped,
],
},
]
),
]);
$buttonStyles = \Illuminate\Support\Arr::toCssStyles([
\Filament\Support\get_color_css_variables($color, shades: [400, 500, 600]) => $color !== 'gray',
]);
$iconSize ??= match ($size) {
ActionSize::ExtraSmall, ActionSize::Small, 'xs', 'sm' => IconSize::Small,
default => IconSize::Medium,
};
$iconClasses = \Illuminate\Support\Arr::toCssClasses([
'fi-btn-icon',
match ($iconSize) {
IconSize::Small, 'sm' => 'h-4 w-4',
IconSize::Medium, 'md' => 'h-5 w-5',
IconSize::Large, 'lg' => 'h-6 w-6',
default => $iconSize,
},
match ($color) {
'gray' => 'text-gray-400 dark:text-gray-500',
default => null,
},
]);
$stringIconSize = match ($iconSize) {
IconSize::Small => 'sm',
IconSize::Medium => 'md',
IconSize::Large => 'lg',
default => $iconSize,
};
$badgeClasses = 'absolute -top-1 start-full z-10 -ms-1 -translate-x-1/2 rounded-md bg-white dark:bg-gray-900';
$labelClasses = \Illuminate\Support\Arr::toCssClasses([
'fi-btn-label',
'sr-only' => $labelSrOnly,
]);
$wireTarget = $attributes->whereStartsWith(['wire:target', 'wire:click'])->filter(fn ($value): bool => filled($value))->first();
$hasFileUploadLoadingIndicator = $type === 'submit' && filled($form);
$hasLoadingIndicator = filled($wireTarget) || $hasFileUploadLoadingIndicator;
if ($hasLoadingIndicator) {
$loadingIndicatorTarget = html_entity_decode($wireTarget ?: $form, ENT_QUOTES);
}
@endphp
@if ($labeledFrom)
@endif
@if ($tag === 'button')
@elseif ($tag === 'a')
map(fn (string $keyBinding): string => str_replace('+', '-', $keyBinding))->implode('.') }}
@endif
@if ($tooltip)
x-tooltip="{
content: @js($tooltip),
theme: $store.theme,
}"
@endif
{{
$attributes
->class([$buttonClasses])
->style([$buttonStyles])
}}
>
@if ($icon && in_array($iconPosition, [IconPosition::Before, 'before']))
@endif
{{ $slot }}
@if ($icon && in_array($iconPosition, [IconPosition::After, 'after']))
@endif
@if (filled($badge))
{{ $badge }}
@endif
@endif