Modal

Basic

public bool $myModal1 = false;

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

Complex

public bool $myModal2 = false;

<x-modal wire:model="myModal2" title="Hello" subtitle="Livewire example" separator>
    <div>Hey!</div>
 
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.myModal2 = false" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</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" persistent>
    <div>Processing ...</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-red-50 p-10 w-64">
    Hello!
</x-modal>
 
<x-button label="Open " @click="$wire.myModal4 = true" />

maryUI

Sponsor