Alert Dialog

Modal dialog specifically designed for alerting users to important information or actions.

Example

Basic Alert Dialog

A standard alert dialog for confirming destructive actions.

blade

<x-plume::button style="error" x-on:click="$openModal('confirm-deletion')">
    Delete Account
</x-plume::button>

<x-plume::alert-dialog name="confirm-deletion" title="Are you absolutely sure?"
    onConfirm="$store.toasts.add({ title: 'Account deleted successfully.', type: 'error' })">
    ...
</x-plume::alert-dialog>

Prop	Type	Default	Description
name	string	'alert-dialog'	Unique name for the dialog, used by x-plume::button to target it.
show	bool	false	Whether the dialog is visible by default.
maxWidth	string	'2xl'	Maximum width of the dialog (sm, md, lg, xl, 2xl, etc.).
action	string	'Confirm'	Text for the primary action button.
withCancel	bool	true	Whether to show a cancel button.
onConfirm	string	''	JavaScript action to execute when the primary button is clicked.

Usage

blade

<x-plume::alert-dialog name="confirm-action" title="Confirm Action" action="Yes, Proceed"
    onConfirm="doSomething()">
    Are you sure you want to perform this action?
</x-plume::alert-dialog>