# Toasts just got better

Published: October 14, 2024

Version: ^1.0.10

Flux's [Toast component](/components/toast) just got a heap of improvements based on a mixture of your feedback and our intuition.

## Making them stand-out

First, we increased the drop-shadow to make Toasts appear as if they are in the foreground of the page.

<img class="rounded-2xl border" src="/img/blog/toast_shadows.png" alt="Toast shadow comparison" />

We also increased the slide-up animation duration so that the motion of the Toast more easily catches the user's eye.

<img class="rounded-2xl border" src="/img/blog/toast_animation.gif" alt="Toast shadow comparison" />

## Adding variants

You can now add additional context to your Toast messages using one of three new variants: success, danger, and warning.

<img class="rounded-2xl border" src="/img/blog/toast_variants.png" alt="Toast variants" />

Variants can be used by passing the `variant` parameter to `Flux::toast()` like so:

```php
Flux::toast('Something went wrong', variant: 'danger');
```

## Positioning

You can now specify where on the page you want your toasts to appear by passing the `position` prop to `<flux:toast />`:

```html
<flux:toast position="top right" />
```

If you have a header navbar at the top of your app, you may want to add extra padding using Tailwind:

```html
<flux:toast position="top right" class="pt-24" />
```

Flux automatically adjusts animations based on position. Toasts positioned at the top will slide-in from the side, while Toasts on the bottom will slide up from the bottom.

## Persisting toasts between redirects

A common pattern in applications is to trigger a toast before redirecting your users elsewhere:

```php
Flux::toast(...);

$this->redirect('...', navigate: true);
```

If you wish to preserve your toasts between page visits, you can do so using the `@persist` Blade directive in your layout:

```html
@persist('toast')
    <flux:toast />
@endpersist
```

Now, If you trigger a toast before a redirect, it will remain on the page after the redirect.

This behavior was previously broken because of the way Browsers handle popovers between pages, however we introduced a patch in Livewire version **3.5.10** to allow for this.