Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Laravel

Livewire Modal Components Pattern

Build reusable modal components with Livewire.

16 January 20261 min readLaravelاقرأ بالعربية

On this page

  1. Modal Component
  2. Usage

Reusable modals:

Modal Component

php
class ConfirmModal extends Component
{
    public bool $show = false;
    public string $title = '';
    public string $message = '';

    #[On('open-confirm')]
    public function open($title, $message)
    {
        $this->title = $title;
        $this->message = $message;
        $this->show = true;
    }

    public function confirm()
    {
        $this->dispatch('confirmed');
        $this->show = false;
    }
}

Usage

blade
<button wire:click="$dispatch('open-confirm', {title: 'Delete?', message: 'Are you sure?'})">
    Delete
</button>

<livewire:confirm-modal />
All articles

Keep reading

  • Laravel Action Classes Pattern16 January 20261 min read
  • Laravel Action Classes: Single Responsibility16 January 20261 min read
  • Laravel API Rate Limiting16 January 20261 min read