Modal

This component has five props and a slot, only the one prop and slot are required.

route is required. It takes the same value that you would put in the action for a delete form.
e.g. route="{{ route('delete-users', ['id' => 1]) }}"

The slot is how you trigger the modal. For example, a delete button (the most common case).

Important: the modal has a boolean data called show, so the slot trigger should toggle that boolean.

The remaining props are only if the defaults don't work for you. They are self explanatory:

h2
body
cancelButtonText
actionButtonText

The example below is set up like this -- the slot is the span with the alpinejs click action:

<x-bl.modal route=route="{{ route('delete-users', ['id' => 1]) }}" h2="Delete this user?"> <span x-on:click="show = !show"> <x-bl.button classNames="delete">Delete!</x-bl.button> </span> </x-bl.modal>

NOTE: the flash is not a part of the modal. That's a different component.

**IMPORTANT**: This requires alpinejs to be installed. It's automatic with livewire, otherwise, add it to the application manually.