Skip to main content
You can update any toast after it’s been created by referencing its ID. This is useful for showing progress, changing status from loading to success, or modifying the content based on events.

​
Setting a toast ID

To update a toast, you first need to assign it a unique ID when creating it. 
// Create a toast with a specific ID
toast({
    id: 'my-toast',
    type: 'info',
    title: 'Processing...'
});

​
Updating toast properties

Once a toast has an ID, you can update any of its properties using toast.update(). 
// Update the title and type
toast.update('my-toast', {
    title: 'Complete!',
    type: 'success'
});

​
Common use cases

​
Loading to success

Show a loading spinner that updates to a success message when complete. 
// Start with loading state
toast({
    id: 'save-operation',
    type: 'loading',
    title: 'Saving changes...',
    duration: 0
});

// After operation completes
fetch('/api/save', { method: 'POST' })
    .then(() => {
        toast.update('save-operation', {
            type: 'success',
            title: 'Changes saved!',
            duration: 3000
        });
    });

​
Showing progress

Update a toast to show upload or processing progress. 
// Create initial toast
toast({
    id: 'upload-files',
    type: 'info',
    title: 'Uploading files...',
    progress: 0,
    duration: 0
});

// Update progress as upload continues
toast.update('upload-files', { progress: 0.33 });
toast.update('upload-files', { progress: 0.66 });

// Complete the upload
toast.update('upload-files', {
    progress: 1,
    type: 'success',
    title: 'Upload complete!'
});
The progress bar is automatically shown when the progress property is set to a value between 0 and 1.

​
Changing colors

Update the toast color dynamically based on state changes. 
toast({
    id: 'status-check',
    type: 'info',
    title: 'Checking status...',
    color: '#3b82f6'
});

// Update to warning state
toast.update('status-check', {
    type: 'warning',
    title: 'Connection unstable',
    color: '#f59e0b'
});

​
Updatable properties

You can update any of these properties:
  • type — Change between success, error, warning, info, or loading
  • title — Update the main heading
  • message — Change the message text block
  • icon — Switch to a different icon (custom or built-in)
  • avatar — Change the avatar image URL
  • avatarSize — Adjust avatar dimensions
  • color — Override the type color
  • progress — Update progress bar (0 to 1)
  • persistent — Toggle auto-dismiss behavior
  • duration — Change how long the toast stays visible

​
Progress toast helper

For progress updates, use the dedicated toast.progress() helper which handles the ID automatically.
1

Create a progress toast

The helper returns an ID you’ll use for updates:
const id = toast.progress('Uploading photos...');
2

Update the progress

Pass the ID and a value between 0 and 1:
toast.progress(id, 0.25);
toast.progress(id, 0.5);
toast.progress(id, 0.75);
3

Complete the operation

When progress reaches 1, the toast automatically switches to success:
toast.progress(id, 1, 'Upload complete!');
You can also pass options as the second parameter when creating:
const id = toast.progress('Processing...', {
    type: 'warning',
    color: '#8b5cf6'
});

​
Livewire progress updates

In Livewire components, dispatch the toast-update event as your operation progresses. 
public function uploadPhotos()
{
    // Start progress toast
    $this->dispatch('toast', [
        'id' => 'photo-upload',
        'type' => 'info',
        'title' => 'Uploading photos...',
        'progress' => 0,
        'duration' => 0,
    ]);

    foreach ($this->photos as $index => $photo) {
        // Upload photo
        Storage::put('photos/' . $photo->getClientOriginalName(), $photo->get());

        // Update progress
        $progress = ($index + 1) / count($this->photos);
        $this->dispatch('toast-update', [
            'id' => 'photo-upload',
            'progress' => $progress,
        ]);
    }

    // Mark complete
    $this->dispatch('toast-update', [
        'id' => 'photo-upload',
        'progress' => 1,
        'type' => 'success',
        'title' => 'All photos uploaded!',
    ]);
}

​
Best practices

Use descriptive IDs

Choose IDs that clearly describe the operation, like order-123-payment rather than generic IDs.

Set duration to 0 for loading

Persistent toasts (duration: 0) are ideal for operations that may take varying amounts of time.

Update type on completion

Always change the type to success or error when the operation finishes so users get clear feedback.

Include final message

When completing an update, provide a meaningful completion message like “Upload complete!” instead of leaving the loading message.
If you try to update a toast that doesn’t exist or has already been dismissed, the update will be silently ignored. Always ensure the toast ID matches an active toast.

Build docs developers (and LLMs) love

Get started for freeTalk to us