Confirmation dialog
A narrow window that asks the user one last time before an action that cannot be undone, such as deleting. It is built on acun:modal; opening, closing and focus behave the same way.
Basic usage
Like a modal, the window is opened by its name: acun:modal.trigger, the acun:modal:open event or AcunUI.modal.open('catalog-product-delete'). Use title and description to state clearly what will be deleted; make the confirm button text the name of the action with confirm-text ("Delete" rather than "Confirm").
<acun:modal.trigger name="catalog-product-delete"><acun:button variant="outline-danger">Delete the product</acun:button></acun:modal.trigger>
<acun:confirmation-dialog
name="catalog-product-delete"
title="Delete the product"
description="Are you sure you want to delete the 'Wireless headphones' product? This cannot be undone."
confirm-text="Delete"
/>| Prop | Values |
|---|---|
title | Default: Are you sure? (in the app language) |
description | Description text |
confirm-text | Default: Confirm |
cancel-text | Default: Cancel |
Listening for the confirmation
When the slot is empty, the confirm button closes the window and emits the {name}-confirmed event. Listen for this event with .window and start the action.
<div x-data x-on:catalog-product-archive-confirmed.window="$dispatch('toast', { type: 'success', message: 'Product archived.' })">
<acun:modal.trigger name="catalog-product-archive"><acun:button variant="white">Archive</acun:button></acun:modal.trigger>
</div>
<acun:confirmation-dialog
name="catalog-product-archive"
title="Archive the product"
description="An archived product does not appear in the store; its sales records are kept."
confirm-text="Archive"
/>| Prop | Values |
|---|---|
{name}-confirmed | Event emitted on confirmation |
Your own confirm button
A button you put in the slot replaces the default confirm button, and confirm-text is not used. Close the window yourself with close() on the button.
<acun:modal.trigger name="catalog-customer-delete"><acun:button variant="outline-danger">Delete the customer</acun:button></acun:modal.trigger>
<acun:confirmation-dialog name="catalog-customer-delete" title="Delete the customer permanently" description="The customer's entire order history will be deleted as well.">
<acun:modal.close><acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'success', message: 'Customer deleted.' })">Delete permanently</acun:button></acun:modal.close>
</acun:confirmation-dialog>With Livewire
Give the confirm button a wire:click; when the action finishes, close the window by sending acun:modal:close from the server. If you need to clear some state when the user cancels, use close-action. The original names (open-modal, close-modal) keep working as well.
<acun:confirmation-dialog name="delete-product" title="Delete the product" description="This cannot be undone." close-action="clearProductToDelete">
<acun:button variant="danger" wire:click="delete">Delete</acun:button>
</acun:confirmation-dialog>
{{-- In the component: public function delete(): void { … $this->dispatch('acun:modal:close', name: 'delete-product'); } --}}| Prop | Values |
|---|---|
close-action | Livewire method called when the user closes the window |
Opening with modal.trigger
The confirmation dialog is also opened with acun:modal.trigger. When you wrap the confirm button in acun:modal.close, the action runs and the window closes.
<acun:modal.trigger name="delete-product">
<acun:button variant="danger">Delete the product</acun:button>
</acun:modal.trigger>
<acun:confirmation-dialog name="delete-product" title="Delete the product?" description="The product's 24 variants and stock records are removed as well. This cannot be undone.">
<acun:modal.close>
<acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'success', message: 'Product deleted.' })">Delete</acun:button>
</acun:modal.close>
</acun:confirmation-dialog>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
name | — | Required. The name used in the acun:modal:open event and the AcunUI.modal.open('…') call; {name}-confirmed is emitted on confirmation |
title | Are you sure? | Window title (default in the app language) |
description | null | Description text |
confirm-text | Confirm | Text of the default confirm button (when the slot is empty) |
cancel-text | Cancel | Text of the cancel button |
close-action | null | Livewire method called when the user closes the window |