Laravel: delete button with double-click confirmation

August 13, 2020 ≈ 21 seconds

Every time, I need to delete something, a confirmation question pops up. The universal widely used approach is to use confirmation dialog (browser default or custom). An alternative is to use double-click confirmation. Below, code of blade component I use in my projects.


<form action="{{ $action }}" method="post">
    @csrf
    @method('delete')

    <button class="focus:outline-none"
            type="button"
            onclick="if (this.style.filter === 'brightness(75%)') this.parentElement.submit(); else this.style.filter = 'brightness(75%)'"
    ></button>
</form>

Usage:


@component('backend.components.delete_button', [
    'action' => '/route/to/action'
])@endcomponent

Subscribe to our newsletter

If you provide url of your website, we send you free design concept of one element (by our choice)

Subscribing to our newsletter, you comply with subscription terms and Privacy Policy