Toast

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

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

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.

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).

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 });

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.