Modal Component

The Modal component provides a dialog overlay for displaying content above the main page.

Basic Usage

Use the modal-trigger component to open a modal with header, content, and footer:

<x-modal-trigger target="example-modal">
    <x-button>Open Modal</x-button>
</x-modal-trigger>

<x-modal name="example-modal" maxWidth="md">
    <x-slot:header>
        <h3 class="font-semibold">Modal Title</h3>
    </x-slot:header>

    <div class="p-4">
        <p>This is the modal content.</p>
    </div>

    <x-slot:footer>
        <x-button variant="ghost" x-on:click="modalIsOpen = false" class="w-full sm:w-fit">
            Cancel
        </x-button>
        <x-button variant="primary" class="w-full sm:w-fit">
            Confirm
        </x-button>
    </x-slot:footer>
</x-modal>

Opening from Livewire

Dispatch an event from your Livewire component to open a modal:

// In your Livewire component
public function showModal()
{
    $this->dispatch('open-modal', name: 'my-modal');
}

// Or close it
public function closeModal()
{
    $this->dispatch('close-modal');
}

In your Blade view:

<x-button wire:click="showModal">Open Modal</x-button>

<x-modal name="my-modal">
    <x-slot:header>
        <h3 class="font-semibold">Title</h3>
    </x-slot:header>

    <div class="p-4">
        <p>Modal content</p>
    </div>
</x-modal>

Props Reference

Prop	Type	Default	Description
name	string|null	null	Unique name for the modal. Required when using modal-trigger or dispatching events.
maxWidth	string	2xl	Maximum width of the modal. Options: sm, md, lg, xl, 2xl, 3xl, 4xl
show	bool	false	Whether the modal is initially open.
backdropBlur	string	sm	Backdrop blur intensity. Options: none, sm, md, lg, xl, 2xl, 3xl
backdropOpacity	string	sm	Backdrop opacity level. Options: none, sm, md, lg, xl, 2xl, 3xl

Slots

Slot	Description
header	Modal header section. Displayed at the top with a close button.
Default slot	Main modal content area.
footer	Modal footer section. Typically used for action buttons.
trigger	Optional trigger element inside the modal component (alternative to using x-modal-trigger).

References

Category	Path / Name	Description
Component	resources/views/components/modal.blade.php	Modal component file
Component	resources/views/components/modal-trigger.blade.php	Modal trigger helper component

For the detailed documentation, please visit the Penguin UI Modals.