Alert

Programmatic alert dialogs and confirmation prompts. Dialogs are created on the fly and appended to the document body. Trigger them from any Alpine context via the $wirestrap.alert magic helper, or from Livewire PHP via the WithWirestrap trait.

Alerts are queued: only one is visible at a time, and each one appears after the previous is dismissed.

Showing an alert

Pass a string for a bare message, or an options object for anything more:

// Simple string
$wirestrap.alert.show('Changes saved.')

// Options object
$wirestrap.alert.show({ type: 'success', message: 'Changes saved.' })

From a Blade template, call it directly on a button click:

<button x-on:click="$wirestrap.alert.show('Action completed.')">
    Show alert
</button>

Variants

Five built-in variants: primary, success, info, warning, danger. type is just a CSS class on the alert element, so any custom class name works.

$wirestrap.alert.show({ type: 'primary', message: 'A new version is available.' })
$wirestrap.alert.show({ type: 'success', message: 'Changes saved.' })
$wirestrap.alert.show({ type: 'info', message: 'Your export is ready.' })
$wirestrap.alert.show({ type: 'warning', message: 'Unsaved changes will be lost.' })
$wirestrap.alert.show({ type: 'danger', message: 'Something went wrong.' })

$wirestrap.alert.show({ type: 'my-custom-alert', message: 'Custom style.' })

Title

Set title to add a header with a colored icon indicator. The icon color follows the variant.

$wirestrap.alert.show({
    type: 'danger',
    title: 'Error',
    message: 'Something went wrong.'
})

Auto-dismiss

Set duration (ms) to dismiss the alert automatically. A progress bar animates for the countdown. duration: 0 is the default and keeps the alert open until dismissed.

$wirestrap.alert.show({
    type: 'success',
    message: 'Changes saved.',
    duration: 3000
})

A common use case is showing a message before a redirect: set showDismiss: false, backdropDismiss: false, and escapeDismiss: false together with a short duration so the user sees the message without being able to interrupt the flow.

Dismiss behavior

The alert can be dismissed via the close button, a backdrop click, or Escape. All three can be disabled independently. When a blocked dismiss is attempted, the dialog shakes.

$wirestrap.alert.show({
    type: 'warning',
    message: 'You must acknowledge this.',
    backdropDismiss: false,
    escapeDismiss: false,
})

From Livewire

Use $this->alert() in any Livewire component that includes the WithWirestrap trait. Multiple calls in the same request are queued and displayed one after the other.

use Wirestrap\Traits\WithWirestrap;

class MyComponent extends Component
{
    use WithWirestrap;

    public function save(): void
    {
        // ...
        $this->alert('success', 'Changes saved.');
        $this->alert(type: 'danger', message: 'Something went wrong.', title: 'Error');
    }
}

Global configuration

Call Wirestrap.alert.configure() once at boot in your app.js to set defaults for every alert. Per-call options always take precedence.

Wirestrap.alert.configure({
    duration: 4000,
    dismissText: 'Close'
})

Confirm dialog

$wirestrap.alert.confirm() shows a confirmation prompt and calls a Livewire method when the user confirms.

Delete record

Shorthand: message, method name, then any number of params as individual arguments:

<button x-on:click="$wirestrap.alert.confirm('Delete this record?', 'delete')">
    Delete
</button>

{{-- Any number of extra arguments are forwarded as method parameters --}}
<button x-on:click="$wirestrap.alert.confirm('Move item?', 'move', {{ $item->id }}, {{ $target->id }})">
    Move
</button>

Use a full options object when you need to customize the dialog:

<button x-on:click="$wirestrap.alert.confirm({
    type: 'danger',
    title: 'Delete record',
    message: 'This action cannot be undone.',
    method: 'delete',
    params: [{{ $record->id }}],
    confirmText: 'Yes, delete',
    cancelText: 'Cancel',
})">
    Delete
</button>

Configure confirm defaults independently via Wirestrap.alert.confirm.configure():

Wirestrap.alert.confirm.configure({
    type: 'warning',
    title: 'Confirm',
    confirmText: 'Yes',
    cancelText: 'No'
})

Options

$wirestrap.alert.show()

$wirestrap.alert.confirm()

Wirestrap.alert.configure()

Wirestrap.alert.confirm.configure()