# Toast and Sonner animation (/docs/components/toast)




## What it fixes [#what-it-fixes]

A stock toast slides in from the corner, far from the button that caused it. With cut on action, it starts at the button, small and slightly blurred, and flies to its place. You see which action the toast is about without reading it.

If nothing was pressed in the last second, as with a toast from a websocket message, the library's own entrance plays.

It works with sonner on both bases, and with Base UI's own `Toast`.

## Install [#install]

```bash
npx shadcn add sonner
```

## Choose a cut [#choose-a-cut]

```tsx
<Cuts toast="none" />
```

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `toast (on <Cuts>)` | `"cut-on-action" \| "none"` | `"cut-on-action"` | The cut for sonner and Base UI toasts. |

The flight takes 480 ms × pace, from 0.4 scale and a 6px blur. The toast's exit is the library's own.


## Questions

### Do I need to change my toast() calls?

No. Call `toast()` as usual. Each toast flies out of the element you pressed, with Sonner and with Base UI toasts.