Asking for user confirmation using the wire:confirm directive

Here's the corrected markdown with spellcheck applied:

In some situations, your users may have the option to trigger dangerous actions like deleting content. Having some sort of confirmation could save a lot of headaches and accidental clicks.

Livewire v3.0.8 simplifies this with the addition of the wire:confirm attribute to any interactive element.

For example, let's say we have the option to delete a user from the database:

1<button
2    type="button"
3    wire:click="delete({{ $user->id }})"
4    wire:confirm="Are you sure you want to delete this user?"
5>
6    Delete User
7</button>

Upon clicking "Delete User", Livewire activates a standard browser confirmation dialog. Should the user opt out by pressing escape or cancel, the action is cancelled. Confirming with "OK" will execute the delete action.

Try it yourself using an interactive Wirebox

User prompts

In addition to the confirmation prompt and just having to confirm by clicking a button, it's also possible to prompt the user for input. Add the prompt modifier to the wire:confirm directive.

1<button
2    type="button"
3    wire:click="delete({{ $user->id }})"
4    wire:confirm.prompt="Are you sure you want to delete {{ $user->name }}?\n\nType CONFIRM to continue|CONFIRM"
5>
6    Delete User
7</button>

Now the user has to type the word CONFIRM in order to execute the delete action. The wire:confirm directive uses the native browser dialog but you might want to have more control of the look and feel and display additional data. Let's take a look at how we can do this with Wire Elements Pro.

Advanced Livewire confirmation dialog

The Wire Elements Pro modal component includes an easy way to trigger a more advanced confirmation dialog. All that you need is the InteractsWithConfirmationModal trait. For example:

 1use WireElements\Pro\Concerns\InteractsWithConfirmationModal;
 2 
 3class UsersOverview extends Modal
 4{
 5    use InteractsWithConfirmationModal;
 6 
 7    public function delete($userId)
 8    {
 9        $this->askForConfirmation(
10            callback: function() use ($userId) {
11                User::find($userId)?->delete();
12            },
13        );
14    }
15 
16    public function render()
17    {
18        return view('livewire.user-overview');
19    }
20}

Instead of wire:confirm, you can reference the delete action using wire:click="delete(1)". This is the most basic example, but this trait offers a variety of settings to enrich the confirmation dialog:

 1$this->askForConfirmation(
 2    callback: function() use ($userId) {
 3        User::find($userId)?->delete();
 4    },
 5    prompt: [
 6        'title' => __('Warning! Destructive action'),
 7        'message' => __('Are you sure you want to delete this user?'),
 8        'confirm' => __('Yes, Delete'),
 9        'cancel' => __('Stop'),
10    ],
11    tableHeaders: ['Column 1', 'Column 2'],
12    tableData: [
13        ['Row 1 - Column 1 Value', 'Row 1 - Column 2 value'],
14        ['Row 2 - Column 1 Value', 'Row 2 - Column 2 value'],
15    ],
16    confirmPhrase: 'DELETE',
17    theme: 'warning',
18    metaData: [
19        'custom' => 'meta data'
20    ],
21    modalBehavior: [
22        'close-on-escape' => false,
23        'close-on-backdrop-click' => false,
24        'trap-focus' => true,
25    ],
26    modalAttributes: [
27        'size' => '2xl'
28    ]
29);

You can adjust the prompt, add and display table data, and modify how the modal should behave. Give the Pro Components a try.