# Toast

Notifications pushed into a queue from anywhere and stacked in one corner, each on its own countdown.

```slint
import { Toaster, ToastQueue, ToastVariant } from "@glint/components/toast.slint";
import { Button, ButtonVariant } from "@glint/components/button.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Button {
                text: "Show toast";
                clicked => {
                    ToastQueue.items = [
                        {
                            id: 1,
                            title: "Event created",
                            description: "Friday, February 10, 2026 at 5:57 PM",
                            variant: ToastVariant.default,
                            action-text: "Undo"
                        }
                    ];
                }
            }

            Button {
                text: "Show success";
                variant: ButtonVariant.secondary;
                clicked => {
                    ToastQueue.items = [
                        {
                            id: 2,
                            title: "Profile updated",
                            description: "Your changes have been saved successfully.",
                            variant: ToastVariant.success
                        }
                    ];
                }
            }
        }
    }

    Toaster {
        width: parent.width;
        height: parent.height;
    }
}
```

## Usage

```slint
import { Toaster, ToastQueue, ToastVariant } from "@glint/components/toast.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    // Mount Toaster once at the root of your window
    Toaster {
        width: parent.width;
        height: parent.height;
    }
}
```

Mount `Toaster` as the last child at your window root. Toasts automatically manage their countdown timers, exit transitions, and dismissal in Slint.

## Examples

### Variants

Toasts support six semantic variants: `default`, `success`, `error`, `info`, `warning`, and `loading`.

```slint
import { Toaster, ToastQueue, ToastVariant } from "@glint/components/toast.slint";
import { Button, ButtonVariant } from "@glint/components/button.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 320px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 12px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Button {
                text: "Success";
                clicked => {
                    ToastQueue.items = [{ id: 1, title: "Saved", variant: ToastVariant.success }];
                }
            }

            Button {
                text: "Error";
                variant: ButtonVariant.destructive;
                clicked => {
                    ToastQueue.items = [{ id: 2, title: "Failed to connect", variant: ToastVariant.error }];
                }
            }

            Button {
                text: "Info";
                variant: ButtonVariant.outline;
                clicked => {
                    ToastQueue.items = [{ id: 3, title: "New version ready", variant: ToastVariant.info }];
                }
            }

            Button {
                text: "Warning";
                variant: ButtonVariant.secondary;
                clicked => {
                    ToastQueue.items = [{ id: 4, title: "Disk almost full", variant: ToastVariant.warning }];
                }
            }
        }
    }

    Toaster {
        width: parent.width;
        height: parent.height;
    }
}
```

### Action button

Supply `action-text` on a `ToastItem` to render an inline action button (such as an undo trigger).

```slint
import { Toaster, ToastQueue, ToastVariant } from "@glint/components/toast.slint";
import { Button } from "@glint/components/button.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Button {
                text: "Delete message";
                clicked => {
                    ToastQueue.items = [
                        {
                            id: 10,
                            title: "Message deleted",
                            description: "Conversation moved to trash.",
                            action-text: "Undo",
                            variant: ToastVariant.default
                        }
                    ];
                }
            }
        }
    }

    Toaster {
        width: parent.width;
        height: parent.height;
    }
}
```

## API Reference

`Toaster` publishes no properties, callbacks or functions of its own. What a call site can set on it is the Slint `Rectangle` it inherits.

### ToastQueue

The interface, and the reason the table above is empty. A toast is not a component you mount where it appears — it is an entry you push into a queue that one `Toaster` renders, from anywhere in the application and without a reference to the surface (ADR-0009). Everything a call site does to a toast, it does here.

### Properties

| Property        | Type                 | Default    | Description                                                                                                                                                                                                                                         |
| --------------- | -------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `items`         | `in-out [ToastItem]` | `[]`       | Live queue of toasts, oldest first; the newest sits closest to the corner. Usually managed by the host, not assigned directly.                                                                                                                      |
| `duration`      | `in-out duration`    | `4s`       | Auto-dismiss delay for toasts that don't carry their own `duration`. `0` disables auto-dismiss, leaving toasts up until they are dismissed.                                                                                                         |
| `update-id`     | `in-out int`         | `-1`       | Which toast a pending `update()` names, what it should become, and a serial that ticks on every call so two updates to the same toast both land. The rows watch the serial and the one carrying that id applies it; nothing else reads these three. |
| `update-to`     | `in-out ToastItem`   | no default |                                                                                                                                                                                                                                                     |
| `update-serial` | `in-out int`         | `0`        |                                                                                                                                                                                                                                                     |

### Callbacks

| Callback          | Description                                                                                                                                                                    |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `show(ToastItem)` | Push a toast onto the queue. Takes the whole item so every field is reachable from the call site; the host assigns the `id`. Host-implemented: Slint cannot append to a model. |
| `dismiss(int)`    | Fired with a toast's id once its exit animation has played, so a host can drop the row from its model.                                                                         |
| `action(int)`     | Fired with a toast's id when its action button is pressed. The toast dismisses itself as well, as Sonner does.                                                                 |

### Functions

| Function                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update(id: int, item: ToastItem)` | Move a toast that is already up to a new state — the loading toast that becomes a success or an error — keeping its place in the stack and its id. `item` replaces the whole entry apart from that id, so a field left unset is cleared rather than kept, and a settled toast starts counting down because it finally has something to count. ToastQueue.show({ id: 3, title: "Uploading", variant: ToastVariant.loading }); // ...later... ToastQueue.update(3, { title: "Uploaded", variant: ToastVariant.success }); |

## Accessibility

- **Live region announcements.** Standard toasts declare `accessible-live-region: AccessibleLiveness.polite`. Error toasts declare `accessible-live-region: AccessibleLiveness.assertive` for immediate notice.
- **Dismissal on click.** Clicking the toast surface triggers dismissal.
- **Exit removal.** Completed exit animations remove the toast from the accessibility tree.