Modal

Create a native modal with the Modal component. The id property is required and used to link open and close buttons as highlighted in the example code below. A Modal may have a fixed footer eg. for additional buttons, you can add the markup with the footer slot. A modal’s content is scrollable on overflow.

'id' => 'modal-id', // required
'footer' => false,
<x-button variant="destructive" label="Konto löschen" href="#modal-account-closing" data-action="open-modal" />

<x-modal id="modal-account-closing">
    <h3 class="mb-6">Konto löschen</h3>
    <p class="mb-2">Wenn sie diesen Vorgang bestätigen, bekommen sie eine E-Mail mit einem Link, der es ihnen zwei Wochen lang ermöglicht, den Vorgang rückgängig zu machen.</p>
    <p class="text-red-800">Nach Ablauf der Frist wird ihr Konto unwiederruflich gelöscht.</p>
    <x-slot:footer>
        <x-button data-action="close-modal" label="Abbrechen" />
        <x-button label="Konto löschen" variant="destructive" href="/app/konto/schliessung" />
    </x-slot>
</x-modal>