Modal

Basic

<x-modal wire:model="myModal1" title="Hey" class="backdrop-blur">
    Press `ESC`, click outside or click `CANCEL` to close.
 
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.myModal1 = false" />
    </x-slot:actions>
</x-modal>
 
<x-button label="Open" @click="$wire.myModal1 = true" />

public bool $myModal1 = false;

Complex

<x-modal wire:model="myModal2" title="Hello" subtitle="Livewire example">
    <x-form no-separator>
        <x-input label="Name" icon="o-user" placeholder="The full name" />
        <x-input label="Email" icon="o-envelope" placeholder="The e-mail" />
 
        {{-- Notice we are using now the `actions` slot from `x-form`, not from modal --}}
        <x-slot:actions>
            <x-button label="Cancel" @click="$wire.myModal2 = false" />
            <x-button label="Confirm" class="btn-primary" />
        </x-slot:actions>
    </x-form>
</x-modal>
 
<x-button label="Open" @click="$wire.myModal2 = true" />

Persistent

Add the persistent attribute to prevent modal close on click outside or when pressing `ESC` key.

<x-modal wire:model="myModal3" title="Payment confirmation" persistent separator>
    <div class="flex justify-between">
        Please, wait ...
        <x-loading class="loading-infinity" />
    </div>
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.myModal3 = false" />
    </x-slot:actions>
</x-modal>
 
<x-button label="Open Persistent" @click="$wire.myModal3 = true" />

Styling

Remember to add box-class custom classes on Tailwind safelist.

<x-modal wire:model="myModal4" class="backdrop-blur" box-class="bg-warning/30 border w-64">
    Hello!
</x-modal>
 
<x-button label="Open " @click="$wire.myModal4 = true" />

Disable focus trap

By default the focus trap is enabled, but you can disable it by adding the without-trap-focus attribute.

<x-modal without-trap-focus ... />

Made with by Robson Tenório and contributors.