Document

Use modals to display content in a layer above the app. They are used to display content that requires user interaction. Our modals also support dynamic loading, so you don't have to include all modals in your initial page load.

 1<x-button type="primary" :openModal="['id' => 'modal-01']">Open modal</x-button>
 2 
 3<x-modal id="modal-01">
 4    <x-modal.header icon="credit-card--outline" title="Add payment method" description="Add a payment method to activate your plan" :close-button="true" />
 5 
 6    <x-modal.body>
 7        <x-alert type="primary">This is the content of the modal body.</x-alert>
 8    </x-modal.body>
 9 
10    <x-modal.footer>
11        <x-button type="transparent" x-on:click="close">Close</x-button>
12        <x-button type="primary">Primary</x-button>
13    </x-modal.footer>
14</x-modal>

Form

Use modals as forms by adding the form element to the model.

 1<x-button type="primary" :openModal="['id' => 'modal-02']">Open modal</x-button>
 2 
 3<x-modal id="modal-02" form wire:submit.prevent="submitForm" wire:loading.class="loading" wire:target="submitForm"> 
 4    <x-modal.header icon="credit-card--outline" title="Add payment method" description="Add a payment method to activate your plan" :close-button="true" />
 5 
 6    <x-modal.body> ...
 7        <div class="row g-3">
 8            <div class="col-12">
 9                <x-input autofocus label="Card number" placeholder="Enter your card number" class="w-100" />
10            </div>
11            <div class="col-6">
12                <x-input label="Expiry date" placeholder="MM/YY" />
13            </div>
14            <div class="col-6">
15                <x-input label="CVV" placeholder="Enter your CVV" />
16            </div>
17        </div>
18    </x-modal.body> 
19 
20    <x-modal.footer>
21        <x-button type="gray" class="me-auto" icon="chat-bubble-left-ellipsis--outline">Chat with us</x-button>
22        <x-button type="transparent" x-on:click="close">Cancel</x-button>
23        <x-button type="primary" as="submit" wire:loading.class="loading" wire:target="submitForm">Save</x-button> 
24    </x-modal.footer>
25</x-modal>

Trigger via component

You can trigger the opening and closing of a modal directly from a Livewire component.

 1# Blade:
 2<x-button type="primary" wire:click="openModalPreview()" wire:loading.class="loading" wire:target="openModalPreview">Open modal</x-button>
 3 
 4 
 5# Laravel:
 6use Livewire\Component;
 7use MaskowLabs\BasicComponents\Helpers\Modal;
 8 
 9class ModalExample extends Component {
10 
11    public function openModalPreview(){
12        Modal::open($this, 'modal-03');
13    }
14 
15    public function closeModalPreview(){
16        Modal::close($this, 'modal-03');
17    }
18}

Send data to modal

You can send data to a modal via JavaScript or with Livewire by passing the data as a parameter to the open method or by using the open-modal-data attribute on a button.

The data is stored inside the modals data property and can be accessed inside the modal with AlpineJS.

Example: x-text="data.time" or x-text="data.yourVariable"

 1# Blade:
 2<x-button type="primary" :openModal="['id' => 'modal-04', 'data' => ['time' => time()]]">Open modal</x-button>
 3 
 4# Laravel:
 5use Livewire\Component;
 6use MaskowLabs\BasicComponents\Helpers\Modal;
 7 
 8class ModalExample extends Component {
 9 
10    public function openModalPreview(){
11        Modal::open($this, 'modal-04', time: time());
12    }
13 
14}
15 
16# Inside the Modal-Component:
17[...]
18<span x-text="data.time"></span>
19[...]

Load Livewire-Component-Modals

If you have for example a table with 1000 entries and you need a modal to edit each entry, including 1000 modals in your initial page load is not a good idea.

Therefor you can use the loadModal method to load a livewire-modal dynamically and pass data to it.

To use this feature, create a new Livewire component with php artisan livewire:make Folder/YourModal and extend the MaskowLabs\BasicComponents\Components\Livewire\ModalComponent class. You also have to add the <livewire-modal /> component to your layout file inside the body tag.

Then just use :loadModal="['id' => 'my-modal', 'component' => 'folder.your-modal', 'data' => ['arg1' => 1, 'arg2']]" on a button to open the modal.

The data array will be passed to the mount method of your Livewire component. With Laravel's model binding you can also pass models directly.

 1# Usage:
 2<x-button :loadModal="['id' => 'my-modal', 'component' => 'folder.your-modal', 'data' => ['argument1' => 1, 'user' => $user->id]]">
 3    Open Modal
 4</x-button>
 5 
 6# Livewire component:
 7namespace App\Livewire\Folder; ...
 8 
 9use App\Models\User;
10use MaskowLabs\BasicComponents\Components\Livewire\ModalComponent;
11 
12class YourModal extends ModalComponent {
13 
14    private int $argument1;
15    public User $user;
16 
17    public function mount(int $argument1, User $user) {
18        $this->argument1 = $argument1;
19        $this->user = $user;
20    }
21 
22    public function modalId(): string { return 'modal-dynamic-example'; }
23 
24    public function render() {
25        return view('folder.your-modal');
26    }
27} 
28 
29# Component "folder.your-modal":
30<x-modal id="my-modal"> ...
31    <x-modal.header title="Modal-Title" />
32 
33    <x-modal.body>
34        <p>Argument 1: {{ $argument1 }}</p>
35        <p>User: {{ $user->name }}</p>
36    </x-modal.body>
37 
38    <x-modal.footer>
39        <x-button wire:click="close">Close</x-button>
40    </x-modal.footer>
41</x-modal> 
42 
43# Layout file must contain:
44<html>
45    <body>
46        [...]
47        <livewire-modal />
48    </body>
49</html>

Sizes

You can use the size attribute to change the size of the modal. The default size is md.

 1<x-button type="primary" :openModal="['id' => 'modal-small']">Small modal</x-button>
 2<x-button type="primary" :openModal="['id' => 'modal-normal']">Default modal</x-button>
 3<x-button type="primary" :openModal="['id' => 'modal-large']">Large modal</x-button>
 4<x-button type="primary" :openModal="['id' => 'modal-full']">Full modal</x-button>
 5 
 6<x-modal id="modal-small" size="sm"> ...
 7    <x-modal.header title="Add payment method" description="Add a payment method to activate your plan" :close-button="true" />
 8 
 9    <x-modal.body>
10        <x-alert type="primary">This is the content of the modal body.</x-alert>
11    </x-modal.body>
12 
13    <x-modal.footer>
14        <x-button type="transparent" x-on:click="close">Close</x-button>
15        <x-button type="primary">Primary</x-button>
16    </x-modal.footer>
17</x-modal>
18<x-modal id="modal-normal" size="md"> ...
19    <x-modal.header icon="credit-card--outline" title="Add payment method" description="Add a payment method to activate your plan" :close-button="true" />
20 
21    <x-modal.body>
22        <x-alert type="primary">This is the content of the modal body.</x-alert>
23    </x-modal.body>
24 
25    <x-modal.footer>
26        <x-button type="transparent" x-on:click="close">Close</x-button>
27        <x-button type="primary">Primary</x-button>
28    </x-modal.footer>
29</x-modal>
30<x-modal id="modal-large" size="lg"> ...
31    <x-modal.header icon="credit-card--outline" title="Add payment method" description="Add a payment method to activate your plan" :close-button="true" />
32 
33    <x-modal.body>
34        <x-alert type="primary">This is the content of the modal body.</x-alert>
35    </x-modal.body>
36 
37    <x-modal.footer>
38        <x-button type="transparent" x-on:click="close">Close</x-button>
39        <x-button type="primary">Primary</x-button>
40    </x-modal.footer>
41</x-modal>
42<x-modal id="modal-full" size="full"> ...
43    <x-modal.header icon="credit-card--outline" title="Add payment method" description="Add a payment method to activate your plan" :close-button="true" />
44 
45    <x-modal.body>
46        <x-alert type="primary">This is the content of the modal body.</x-alert>
47    </x-modal.body>
48 
49    <x-modal.footer>
50        <x-button type="transparent" x-on:click="close">Close</x-button>
51        <x-button type="primary">Primary</x-button>
52    </x-modal.footer>
53</x-modal>

Static Backdrop

Prevent modal from closing when clicking outside by adding backdrop="static" to the modal.

With a static backdrop, users can only close the modal using the close button, escape key, or programmatically.

This is useful for critical actions or forms where you want to ensure users complete the interaction.

 1<x-button type="primary" :openModal="['id' => 'modal-static-backdrop']">Open modal with static backdrop</x-button>
 2<x-button type="primary" :openModal="['id' => 'modal-default-backdrop']">Open modal with default backdrop</x-button>
 3 
 4<x-modal id="modal-static-backdrop" backdrop="static">
 5    <x-modal.header icon="lock-closed--outline" title="Static backdrop modal" description="This modal cannot be closed by clicking the backdrop" :close-button="true" />
 6 
 7    <x-modal.body>
 8        <x-alert type="warning">
 9            <strong>Note:</strong> This modal has a static backdrop. You cannot close it by clicking outside the modal.
10            You must use the close button or the escape key.
11        </x-alert>
12        <p class="mt-4">
13            Try clicking outside this modal - it won't close! This is useful when you want to ensure
14            users complete an action before closing the modal.
15        </p>
16    </x-modal.body>
17 
18    <x-modal.footer>
19        <x-button type="transparent" x-on:click="close">Close modal</x-button>
20        <x-button type="primary">Save changes</x-button>
21    </x-modal.footer>
22</x-modal>
23 
24<x-modal id="modal-default-backdrop">
25    <x-modal.header icon="cursor-arrow-rays--outline" title="Default backdrop modal" description="This modal can be closed by clicking the backdrop" :close-button="true" />
26 
27    <x-modal.body>
28        <x-alert type="primary">
29            <strong>Default behavior:</strong> This modal has the default backdrop behavior.
30            You can close it by clicking outside the modal area.
31        </x-alert>
32        <p class="mt-4">
33            Try clicking outside this modal - it will close automatically.
34        </p>
35    </x-modal.body>
36 
37    <x-modal.footer>
38        <x-button type="transparent" x-on:click="close">Close modal</x-button>
39        <x-button type="primary">Save changes</x-button>
40    </x-modal.footer>
41</x-modal>