Modals
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.
Try clicking outside this modal - it won't close! This is useful when you want to ensure users complete an action before closing the modal.
Try clicking outside this modal - it will close automatically.
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 ensure14 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>Modal Types
Use the type attribute to change the visual style of the modal. This is useful for indicating the nature of the action.
Available types: modal (default), danger, success, warning
The type adds a colored accent to the modal header, making it immediately clear what kind of action the user is about to take.
This is the default modal type. Use it for general content and actions.
Are you sure you want to delete this item? This action is permanent and cannot be reversed.
Your changes have been saved successfully. You can now continue with your work.
You have unsaved changes. Are you sure you want to leave this page?
1<x-button type="white" :openModal="['id' => 'modal-type-default']">Default</x-button> 2<x-button type="danger" :openModal="['id' => 'modal-type-danger']">Danger</x-button> 3<x-button type="success" :openModal="['id' => 'modal-type-success']">Success</x-button> 4<x-button type="warning" :openModal="['id' => 'modal-type-warning']">Warning</x-button> 5 6<x-modal id="modal-type-default" type="modal" size="sm"> 7 <x-modal.header icon="information-circle--outline" title="Default Modal" description="This is a standard modal" :close-button="true" /> 8 <x-modal.body> 9 <p>This is the default modal type. Use it for general content and actions.</p>10 </x-modal.body>11 <x-modal.footer>12 <x-button type="transparent" x-on:click="close">Close</x-button>13 <x-button type="primary">Confirm</x-button>14 </x-modal.footer>15</x-modal>16 17<x-modal id="modal-type-danger" type="danger" size="sm">18 <x-modal.header icon="exclamation-triangle--outline" title="Delete Item" description="This action cannot be undone" :close-button="true" />19 <x-modal.body>20 <p>Are you sure you want to delete this item? This action is permanent and cannot be reversed.</p>21 </x-modal.body>22 <x-modal.footer>23 <x-button type="transparent" x-on:click="close">Cancel</x-button>24 <x-button type="danger">Delete</x-button>25 </x-modal.footer>26</x-modal>27 28<x-modal id="modal-type-success" type="success" size="sm">29 <x-modal.header icon="check-circle--outline" title="Success!" description="Your action was completed" :close-button="true" />30 <x-modal.body>31 <p>Your changes have been saved successfully. You can now continue with your work.</p>32 </x-modal.body>33 <x-modal.footer>34 <x-button type="success" x-on:click="close">Continue</x-button>35 </x-modal.footer>36</x-modal>37 38<x-modal id="modal-type-warning" type="warning" size="sm">39 <x-modal.header icon="exclamation-circle--outline" title="Warning" description="Please review before continuing" :close-button="true" />40 <x-modal.body>41 <p>You have unsaved changes. Are you sure you want to leave this page?</p>42 </x-modal.body>43 <x-modal.footer>44 <x-button type="transparent" x-on:click="close">Stay</x-button>45 <x-button type="warning">Leave anyway</x-button>46 </x-modal.footer>47</x-modal>Stacked Modals (Layers)
You can open multiple modals simultaneously. They will stack on top of each other in layers instead of replacing each other.
Each new modal gets a higher z-index and the previous modals become "background" modals. When you close the top modal, focus automatically returns to the modal below.
This is useful for workflows where you need to open a confirmation dialog from within an edit modal, or drill down into nested information.
Use the closeAll method (Alpine) or $this->closeAll() (Livewire) to close all open modals at once.
This is the first modal. You can open another modal on top of this one.
Notice how the first modal is still visible in the background.
1<x-button type="primary" :openModal="['id' => 'modal-stacked-01']">Open first modal</x-button> 2 3<x-modal id="modal-stacked-01"> 4 <x-modal.header icon="squares-2x2--outline" title="First Modal" description="This is the first modal layer" :close-button="true" /> 5 6 <x-modal.body> 7 <p>This is the first modal. You can open another modal on top of this one.</p> 8 <p class="mt-3"> 9 <x-button type="primary" :openModal="['id' => 'modal-stacked-02']">Open second modal</x-button>10 </p>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="danger" x-on:click="closeAll">Close All</x-button>16 </x-modal.footer>17</x-modal>18 19<x-modal id="modal-stacked-02" size="sm">20 <x-modal.header icon="exclamation-triangle--outline" title="Second Modal" description="This modal is stacked on top" :close-button="true" />21 22 <x-modal.body>23 <x-alert type="warning">24 This is the second modal, displayed on top of the first one.25 </x-alert>26 <p class="mt-3">Notice how the first modal is still visible in the background.</p>27 </x-modal.body>28 29 <x-modal.footer>30 <x-button type="transparent" x-on:click="close">Close this modal</x-button>31 <x-button type="danger" x-on:click="closeAll">Close All</x-button>32 </x-modal.footer>33</x-modal>Close All Modals
When you have multiple modals open, you can close them all at once using closeAll().
In Livewire (from a ModalComponent):
1$this->closeAll();In JavaScript / Alpine:
1<button x-on:click="closeAll">Close All</button>Or dispatch the event directly:
1window.dispatchEvent(new CustomEvent('close-all-modals'));