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 class="backdrop-blur">
    <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" />

Native HTML

Notice the following examples that onclick , .showModal() and .close() are native HTML stuff, not maryUI/Livewire/Alpine.

This is not a recommended approach if you are using forms, because this is native HTML and there is no state management. Use it only for simple confirmations.

{{-- Here is modal`s ID --}}
<x-modal id="modal17" title="Are you sure?">
    <div>Click "cancel" or press ESC to exit.</div>
 
    <x-slot:actions>
        {{-- Notice `onclick` is HTML --}}
        <x-button label="Cancel" onclick="modal17.close()" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</x-modal>
 
{{-- Notice `onclick` is HTML --}}
<x-button label="Open modal" class="btn-primary" onclick="modal17.showModal()" />

maryUI

Sponsor