Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

raobilal4822's avatar

how to redirect on cusotm component

i have a form on which i have a model pop that have a custom view on that view have two button i want when i click on a button i have a custom component i want to open that custom component in a pop up window in filament how to get this

0 likes
1 reply
LaryAI's avatar
Level 58

Certainly! In Filament (a popular Laravel admin panel package), if you want to open a custom component in a popup/modal when clicking a button inside another modal, you can use Filament's built-in modal actions or Livewire events to trigger the display of your custom component.

Here's a step-by-step solution:

1. Create Your Custom Component

Suppose you have a Livewire component called ShowCustomComponent.

// app/Http/Livewire/ShowCustomComponent.php
namespace App\Http\Livewire;

use Livewire\Component;

class ShowCustomComponent extends Component
{
    public function render()
    {
        return view('livewire.show-custom-component');
    }
}

2. Register the Component in Filament

If you are using Filament's resource pages or forms, you can add a custom action to open a modal with your component.

use Filament\Forms\Components\Actions\Action;

Action::make('openCustomComponent')
    ->label('Open Custom Component')
    ->action(fn ($livewire) => $livewire->dispatchBrowserEvent('open-custom-component-modal'))
    ->modal(
        fn () => view('livewire.show-custom-component')
    ),

3. Using Livewire Events for Popup

Alternatively, you can use Livewire events and Alpine.js to control the modal popup.

In your Blade view:

<!-- Button to trigger the modal -->
<button wire:click="$emit('openCustomComponent')">Open Custom Component</button>

<!-- Modal -->
<div x-data="{ open: false }"
     x-on:open-custom-component.window="open = true"
     x-show="open"
     style="display: none;">
    @livewire('show-custom-component')
    <button @click="open = false">Close</button>
</div>

In your main Livewire component:

public function mount()
{
    $this->listeners = [
        'openCustomComponent' => 'showCustomComponentModal',
    ];
}

public function showCustomComponentModal()
{
    $this->dispatchBrowserEvent('open-custom-component');
}

4. Using Filament's Modal Actions (Recommended)

If you are inside a Filament form or table, you can use the ->modal() method on actions to show a custom view or Livewire component.

Action::make('showCustomComponent')
    ->label('Show Custom Component')
    ->modalHeading('Custom Component')
    ->modalContent(fn () => view('livewire.show-custom-component'))
    ->modalSubmitAction(false)
    ->modalCancelActionLabel('Close'),

Summary:

  • Create your custom Livewire component.
  • Use Filament's modal actions or Livewire events to trigger the modal.
  • Render your custom component inside the modal.

If you need a more specific example based on your exact Filament setup (form, table, resource, etc.), please provide more details!

Please or to participate in this conversation.