Laravel Confirmation Dialog Component

Pro

Modal dialog for confirming destructive or important actions before execution, with configurable variants.

A Confirmation Dialog built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::confirmation-dialog>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Confirmation Dialog is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

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>

See the full API, props and live examples in the Confirmation Dialog documentation.

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.

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.

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.

See more examples and every variant in the Confirmation Dialog documentation.

Laravel-native

No JavaScript framework. Pure Blade, Livewire & Alpine.

Dark mode & themeable

Tailwind 4 CSS variables and a visual Theme Studio.

Accessible

WCAG 2.1 AA-minded, keyboard and ARIA support.