Portal UI

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. 

<div x-data="{
    alertDialog: ''
}">
    <x-portal::button variant="outline" x-on:click="alertDialog='dialog-one'">
        Show Dialog
    </x-portal::button>

    <x-portal::alert-dialog id="dialog-one">
        <x-portal::alert-dialog.content action="/delete/1" method="DELETE" >
            <x-portal::alert-dialog.title>
                Are you absolutely sure?
            </x-portal::alert-dialog.title>
            <x-portal::alert-dialog.description>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
            </x-portal::alert-dialog.description>

            <x-portal::alert-dialog.action>
                <x-portal::alert-dialog.cancel>Cancel</x-portal::alert-dialog.cancel>
                <x-portal::alert-dialog.confirm>Continue</x-portal::alert-dialog.confirm>
            </x-portal::alert-dialog.action>

        </x-portal::alert-dialog.content>
    </x-portal::alert-dialog>
</div>

Publishing Component

If you want to customize the components, you can publish them by running the following command. 

php artisan vendor:publish --tag=portal-ui:alert-dialog --force