Advanced

Customization

Use image helpers, CSS classes, button ordering, and raw SweetAlert2 options when built-in presets are not enough.

Image

Use imageUrl(), imageWidth(), imageHeight(), and imageAlt() for custom alert imagery.

Live demo

SweetAlert2

PHP

LivewireAlert

LivewireAlert::title('Livewire Alert')
    ->imageUrl('/images/example.png')
    ->imageWidth(320)
    ->imageAlt('Livewire Alert banner')
    ->show();

Custom CSS classes

Use customClass() to apply SweetAlert2 custom class names to alert parts.

Live demo

SweetAlert2

PHP

LivewireAlert

LivewireAlert::title('Styled Alert')
    ->success()
    ->customClass([
        'popup' => 'rounded-2xl',
        'confirmButton' => 'btn-primary',
        'cancelButton' => 'btn-secondary',
    ])
    ->show();

Reverse buttons

Use reverseButtons() when your destructive flow needs the confirm and cancel positions swapped.

Live demo

SweetAlert2

PHP

LivewireAlert

LivewireAlert::title('Are you sure?')
    ->asConfirm()
    ->reverseButtons()
    ->onConfirm('deleteItem')
    ->show();

Options

Use withOptions() for any SweetAlert2-compatible option that does not have a dedicated helper.

Live demo

SweetAlert2

PHP

LivewireAlert

LivewireAlert::title('Custom Alert')
    ->text('This alert has a unique style.')
    ->success()
    ->withOptions([
        'width' => '400px',
        'background' => '#18181b',
        'color' => '#f4f4f5',
        'allowOutsideClick' => false,
    ])
    ->show();

See the SweetAlert2 configuration reference for the full option list.