Rendering an action in a Livewire component

Before proceeding, make sure filament/actions is installed in your project. You can check by running:

composer show filament/actions

If it’s not installed, consult the installation guide and configure the individual components according to the instructions.

Setting up the Livewire component

First, generate a new Livewire component:

php artisan make:livewire ManagePost

Then, render your Livewire component on the page:

@livewire('manage-post')

Alternatively, you can use a full-page Livewire component:

use App\Livewire\ManagePost;
use Illuminate\Support\Facades\Route;

Route::get('posts/{post}/manage', ManagePost::class);

You must use the InteractsWithActions and InteractsWithSchemas traits, and implement the HasActions and HasSchemas interfaces on your Livewire component class:

use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;

class ManagePost extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;
    use RestrictsFileUploadsToSchemaComponents;

    // ...
}

Adding the action

Add a method that returns your action. The method must share the exact same name as the action, or the name followed by Action:

use App\Models\Post;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;

class ManagePost extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;
    use RestrictsFileUploadsToSchemaComponents;

    public Post $post;

    public function deleteAction(): Action
    {
        return Action::make('delete')
            ->color('danger')
            ->requiresConfirmation()
            ->action(fn () => $this->post->delete());
    }
    
    // This method name also works, since the action name is `delete`:
    // public function delete(): Action
    
    // This method name does not work, since the action name is `delete`, not `deletePost`:
    // public function deletePost(): Action

    // ...
}

$post is a model property on a regular Livewire component. Filament does not re-query or authorize it on later requests. Re-query and authorize the post before using it in the action, including any tenant or ownership restrictions your application requires. See Eloquent model restoration in Livewire for more information.

Finally, you need to render the action in your view. To do this, you can use {{ $this->deleteAction }}, where you replace deleteAction with the name of your action method:

<div>
    {{ $this->deleteAction }}

    <x-filament-actions::modals />
</div>

You also need <x-filament-actions::modals /> which injects the HTML required to render action modals. This only needs to be included within the Livewire component once, regardless of how many actions you have for that component.

filament/actions also includes the following packages:

• filament/forms
• filament/infolists
• filament/notifications
• filament/support

These packages allow you to use their components within Livewire components. For example, if your action uses Notifications, remember to include @livewire('notifications') in your layout and add @import '../../vendor/filament/notifications/resources/css/index.css' to your CSS file.

If you are using any other Filament components in your action, make sure to install and integrate the corresponding package as well.

Passing action arguments

Sometimes, you may wish to pass arguments to your action. For example, if you’re rendering the same action multiple times in the same view, but each time for a different model, you could pass the model ID as an argument, and then retrieve it later. To do this, you can invoke the action in your view and pass in the arguments as an array:

<div>
    @foreach ($posts as $post)
        <h2>{{ $post->title }}</h2>

        {{ ($this->deleteAction)(['post' => $post->id]) }}
    @endforeach

    <x-filament-actions::modals />
</div>

Now, you can access the post ID in your action method:

use App\Models\Post;
use Filament\Actions\Action;

public function deleteAction(): Action
{
    return Action::make('delete')
        ->color('danger')
        ->requiresConfirmation()
        ->action(function (array $arguments) {
            $post = Post::find($arguments['post']);

            $post?->delete();
        });
}

Action arguments are client-controlled. Always query and authorize the requested record, including any tenant or ownership restrictions, before acting on it.

Hiding actions in a Livewire view

If you use hidden() or visible() to control if an action is rendered, you should wrap the action in an @if check for isVisible():

<div>
    @if ($this->deleteAction->isVisible())
        {{ $this->deleteAction }}
    @endif
    
    {{-- Or --}}
    
    @if (($this->deleteAction)(['post' => $post->id])->isVisible())
        {{ ($this->deleteAction)(['post' => $post->id]) }}
    @endif
</div>

The hidden() and visible() methods also control if the action is disabled(), so they are still useful to protect the action from being run if the user does not have permission. Encapsulating this logic in the hidden() or visible() of the action itself is good practice otherwise you need to define the condition in the view and in disabled().

You can also take advantage of this to hide any wrapping elements that may not need to be rendered if the action is hidden:

<div>
    @if ($this->deleteAction->isVisible())
        <div>
            {{ $this->deleteAction }}
        </div>
    @endif
</div>

Grouping actions in a Livewire view

You may group actions together into a dropdown menu by using the <x-filament-actions::group> Blade component, passing in the actions array as an attribute:

<div>
    <x-filament-actions::group :actions="[
        $this->editAction,
        $this->viewAction,
        $this->deleteAction,
    ]" />

    <x-filament-actions::modals />
</div>

You can also pass in any attributes to customize the appearance of the trigger button and dropdown:

<div>
    <x-filament-actions::group
        :actions="[
            $this->editAction,
            $this->viewAction,
            $this->deleteAction,
        ]"
        label="Actions"
        icon="heroicon-m-ellipsis-vertical"
        color="primary"
        size="md"
        tooltip="More actions"
        dropdown-placement="bottom-start"
    />

    <x-filament-actions::modals />
</div>

Chaining actions

You can chain multiple actions together, by calling the replaceMountedAction() method to replace the current action with another when it has finished:

use App\Models\Post;
use Filament\Actions\Action;

public function editAction(): Action
{
    return Action::make('edit')
        ->schema([
            // ...
        ])
        // ...
        ->action(function (array $arguments) {
            $post = Post::find($arguments['post']);

            // ...

            $this->replaceMountedAction('publish', $arguments);
        });
}

public function publishAction(): Action
{
    return Action::make('publish')
        ->requiresConfirmation()
        // ...
        ->action(function (array $arguments) {
            $post = Post::find($arguments['post']);

            $post->publish();
        });
}

Now, when the first action is submitted, the second action will open in its place. The arguments that were originally passed to the first action get passed to the second action, so you can use them to persist data between requests.

If the first action is canceled, the second one is not opened. If the second action is canceled, the first one has already run and cannot be cancelled.

Programmatically triggering actions

Sometimes you may need to trigger an action without the user clicking on the built-in trigger button, especially from JavaScript. Here is an example action which could be registered on a Livewire component:

use Filament\Actions\Action;

public function testAction(): Action
{
    return Action::make('test')
        ->requiresConfirmation()
        ->action(function (array $arguments) {
            dd('Test action called', $arguments);
        });
}

You can trigger that action from a click in your HTML using the wire:click attribute, calling the mountAction() method and optionally passing in any arguments that you want to be available:

<button wire:click="mountAction('test', { id: 12345 })">
    Button
</button>

To trigger that action from JavaScript, you can use the $wire utility, passing in the same arguments:

$wire.mountAction('test', { id: 12345 })