Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Confirmation Dialog component displays a modal that asks the user to confirm or cancel an action before proceeding. It is typically used for destructive operations like deleting records or irreversible changes. The dialog supports multiple visual variants (danger, warning, info) and is triggered via Alpine.js event dispatch.

Basic Usage

<x-aura::confirmation-dialog
    name="delete-record"
    variant="danger"
    title="Delete Record"
    message="Are you sure you want to delete this record? This action cannot be undone."
    confirmText="Yes, Delete"
/>

<!-- Trigger the dialog -->
<x-aura::button
    variant="danger"
    x-on:click="$dispatch('open-confirm', 'delete-record')"
>
    Delete
</x-aura::button>

<!-- Listen for confirmation -->
<div x-on:confirmed.window="if ($event.detail === 'delete-record') $wire.delete(recordId)">
    ...
</div>

Props

Prop Type Default Description
title string 'Are you sure?' Dialog heading text.
message string '' Descriptive text explaining the action and its consequences.
confirmText string 'Confirm' Label for the confirm button.
cancelText string 'Cancel' Label for the cancel button.
variant string 'danger' Visual variant: danger, warning, or info. Affects icon and confirm button color.

Props are set statically on the component. Open the dialog by dispatching $dispatch('open-confirm', 'name') and listen for confirmation with x-on:confirmed.window.

Examples

Delete Confirmation

<x-aura::confirmation-dialog
    name="delete-customer"
    variant="danger"
    title="Delete Customer"
    message="This will permanently delete the customer and all associated data. This action cannot be undone."
    confirmText="Yes, Delete"
    cancelText="Keep Customer"
/>

<x-aura::button
    variant="danger"
    size="sm"
    x-on:click="$dispatch('open-confirm', 'delete-customer')"
>
    Delete Customer
</x-aura::button>

Warning Variant for Risky Operations

<x-aura::confirmation-dialog
    name="reset-settings"
    variant="warning"
    title="Reset Settings"
    message="This will reset all settings to their default values. Your current configuration will be lost."
    confirmText="Reset Settings"
/>

<x-aura::button
    variant="warning"
    x-on:click="$dispatch('open-confirm', 'reset-settings')"
>
    Reset to Defaults
</x-aura::button>

Info Variant for Non-Destructive Confirmation

<x-aura::confirmation-dialog
    name="publish-article"
    variant="info"
    title="Publish Article"
    message="This article will be visible to all users immediately after publishing."
    confirmText="Publish Now"
/>

<x-aura::button
    x-on:click="$dispatch('open-confirm', 'publish-article')"
>
    Publish
</x-aura::button>

Triggered from Livewire

// In a Livewire component method
public function confirmBulkDelete(): void
{
    $this->dispatch('open-confirm', 'bulk-delete');
}

public function bulkDelete(): void
{
    Record::whereIn('id', $this->selected)->delete();
    $this->selected = [];
    $this->dispatch('toast', type: 'success', message: 'Records deleted successfully.');
}

<!-- Blade view -->
<x-aura::confirmation-dialog
    name="bulk-delete"
    variant="danger"
    title="Delete Selected Records"
    message="You are about to delete the selected records. This action is irreversible."
    confirmText="Delete Records"
/>

<div x-on:confirmed.window="if ($event.detail === 'bulk-delete') $wire.bulkDelete()">
    <x-aura::button variant="danger" wire:click="confirmBulkDelete">
        Delete Selected ({{ count($selected) }})
    </x-aura::button>
</div>

Multiple Confirmation Scenarios on One Page

<!-- Each scenario gets its own dialog instance with static props -->
<x-aura::confirmation-dialog
    name="remove-user"
    variant="danger"
    title="Remove User"
    message="Remove this user from the team?"
    confirmText="Yes, Remove"
/>

<x-aura::confirmation-dialog
    name="archive-project"
    variant="warning"
    title="Archive Project"
    message="Archive this project? It can be restored later."
    confirmText="Archive"
/>

<!-- Trigger buttons -->
<x-aura::button
    variant="danger"
    x-on:click="$dispatch('open-confirm', 'remove-user')"
>
    Remove
</x-aura::button>

<x-aura::button
    x-on:click="$dispatch('open-confirm', 'archive-project')"
>
    Archive
</x-aura::button>

<!-- Listen for confirmations -->
<div
    x-on:confirmed.window="
        if ($event.detail === 'remove-user') $wire.removeUser(userId);
        if ($event.detail === 'archive-project') $wire.archiveProject(projectId);
    "
>
    ...
</div>

Slots

Slot Description
default Not used. Content is controlled via props and the dispatched event payload.

Only one <x-aura::confirmation-dialog /> is needed per page. It listens for confirm events globally and reconfigures itself with each event's payload.

Accessibility

  • The dialog uses role="alertdialog" with aria-modal="true".
  • aria-labelledby points to the title and aria-describedby points to the message.
  • Focus is trapped inside the dialog while open.
  • The cancel button receives focus by default when the dialog opens (prevents accidental confirmation).
  • Escape closes the dialog (equivalent to cancel).
  • Tab cycles between the cancel and confirm buttons.
  • Enter activates the focused button.
  • The overlay backdrop prevents interaction with the page behind the dialog.