# smootify-toasts

> Short messages (toasts) when something happens on the page: an add to cart, a change the cart refused, a wishlist toggle, a Smootify form sent, a link copied; one clone of its [toast="…"] template per toast (no template, no toast; §2.14). Once per page, usually in a global component; shown in the top layer (a manual popover) above drawers and dialogs, placed by its class (bottom right until then) (2.0).

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/smootify-toasts  
Updated: 2026-10-13

## Where it can go

- **Anywhere** on the page.
- **Must contain** `[toast]`.
- **Out of place,** it stays in the page and does nothing: without a [toast] template.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-duration`, `data-max`.
- **Smootify writes** `popover="manual"`, `aria-live="polite"` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Toasts](https://www.smootify.io/docs/reference/attributes/toast) | `toast` | 7 |
| [Toast content](https://www.smootify.io/docs/reference/attributes/toast-item) | `toast-item` | 7 |
| [Toast buttons](https://www.smootify.io/docs/reference/attributes/toast-actions) | `data-action` | 2 |

## Loading

Its code loads only on pages that have `smootify-toasts`.