Filament Custom Livewire Component: Use Actions and not Blade Buttons

If you create custom Livewire components in Filament, you may notice some components don't act the same as in the Resources. Let's take the example of Upload button which should be disabled while the file is uploading, but it happens only when you use the Action and not just the button. Let me show you.

When adding a form to the Livewire component Blade, you would usually use a blade component provided by Filament to add a button and have the same styling.

<div>
    <x-filament-panels::form wire:submit="submit">
        {{ $this->form }}
 
        <div>
            <x-filament::button type="submit"> 
                Save
            </x-filament::button>
        </div>
    </x-filament-panels::form>
</div>

But you need to mimic not only the styling, but also the Action behavior. With just x-filament::button, you don't have that Uploading file... functionality.

To have the same behavior, instead of a Blade component, you should use Filament actions. In your custom page or Livewire component class, you would create an action:

use Livewire\Component;
use Filament\Actions\Action;
use Filament\Forms\Contracts\HasForms;
use Filament\Actions\Contracts\HasActions;
 
class CustomLivewireComponent extends Component implements HasActions, HasForms
{
    // ...
 
    public function submitFormAction(): Action
    {
        return Action::make('save')
            ->submit('submit');
    }
}

Then, in the View file, instead of using a regular button, you would use this action:

<div>
    <x-filament-panels::form wire:submit="submit">
        {{ $this->form }}
 
        <div>
            {{ $this->submitFormAction }} {{-- [tl! ++] --}}
        </div>
    </x-filament-panels::form>
</div>

And that's it! Now, the button will behave the same when uploading files in your custom page or a Livewire component.