confirm-delete

A confirm dialog with delete wording, the DELETE method and CSRF.

Example

Publish this profile?

The public site updates within a few minutes.

Delete segment?

Members stay in the connected platforms.

Laravel

<x-admin::toolbar>
    <x-admin::button data-adm-open="g-confirm">Publish</x-admin::button>
    <x-admin::button variant="destructive" data-adm-open="g-delete">Delete</x-admin::button>
</x-admin::toolbar>
<x-admin::confirm id="g-confirm" action="/publish" title="Publish this profile?" confirm="Publish">The public site updates within a few minutes.</x-admin::confirm>
<x-admin::confirm-delete id="g-delete" action="/segments/1" title="Delete segment?" confirm="Delete segment">Members stay in the connected platforms.</x-admin::confirm-delete>

Props

PropRequiredDefaultOptions
idyes
actionyes
titlenull
messagenull
confirmnull
method"DELETE"

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

No React or Vue component. It posts a Laravel form with CSRF. Use Confirm and delete however your app does.

HTML, for any stack
<div class="adm-toolbar" role="toolbar"><button type="button" class="adm-btn adm-btn--secondary" data-adm-open="g-confirm" >Publish</button>
    <button type="button" class="adm-btn adm-btn--destructive" data-adm-open="g-delete" >Delete</button></div>
<dialog id="g-confirm" class="adm-dialog" aria-labelledby="g-confirm-title" role="alertdialog">
    <form method="POST" action="/publish"  >
                            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-confirm-title">Publish this profile?</h2>
                            <p class="adm-subtle">The public site updates within a few minutes.</p>
                    </div>
        <div class="adm-dialog__footer">
            <button type="button" class="adm-btn adm-btn--secondary" data-adm-close>Cancel</button>
            <button type="submit" class="adm-btn adm-btn--primary" >Publish</button>
        </div>
</form>
</dialog>
<dialog id="g-delete" class="adm-dialog" aria-labelledby="g-delete-title" role="alertdialog">
    <form method="POST" action="/segments/1"  >
                            <input type="hidden" name="_method" value="DELETE">            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-delete-title">Delete segment?</h2>
                            <p class="adm-subtle">Members stay in the connected platforms.</p>
                    </div>
        <div class="adm-dialog__footer">
            <button type="button" class="adm-btn adm-btn--secondary" data-adm-close>Cancel</button>
            <button type="submit" class="adm-btn adm-btn--destructive" >Delete segment</button>
        </div>
</form>
</dialog>