@lattice-ui/toast Part of the stable direction toward v1.0.
What It Is For
Use Toast for transient feedback that should queue, stack, and dismiss automatically without interrupting the main interaction flow.
It is appropriate for saved-state messages, undo affordances, and background task completion notices.
import { Toast, useToast } from "@lattice-ui/toast";
function ToastDemo() {
const toast = useToast();
return (
<frame BackgroundTransparency={1} Size={UDim2.fromOffset(420, 220)}>
<textbutton
AutoButtonColor={false}
BackgroundColor3={Color3.fromRGB(53, 104, 196)}
BorderSizePixel={0}
Size={UDim2.fromOffset(160, 38)}
Text="Enqueue toast"
TextColor3={Color3.fromRGB(240, 244, 250)}
TextSize={14}
Event={{
Activated: () => {
toast.enqueue({
title: "Saved",
description: "Preferences were updated.",
});
},
}}
>
<uicorner CornerRadius={new UDim(0, 8)} />
</textbutton>
<frame
BackgroundTransparency={1}
Position={UDim2.fromOffset(0, 56)}
Size={UDim2.fromOffset(320, 140)}
>
<Toast.Viewport />
</frame>
</frame>
);
}
export function ToastExample() {
return (
<Toast.Provider defaultDurationMs={3000} maxVisible={3}>
<ToastDemo />
</Toast.Provider>
);
}Live demo is experimental and may contain bugs.
Install
Global CLI command: lattice add toast
Monorepo local script
Use your package manager wrapper when running the local lattice command.
pnpm lattice add toastPublic Exports
-
Toast -
Toast.Provider -
Toast.Viewport -
Toast.Root -
Toast.Title -
Toast.Description -
Toast.Action -
Toast.Close -
dequeueToast -
enqueueToast -
getVisibleToasts -
pruneExpiredToasts -
useToast
State Model
Toast.Providerowns the full toast queue, the visible subset, the default duration, and the maximum visible count.useToast()exposes the imperative queue API so any component in the provider tree can enqueue and clear toasts.Toast.Rootis presentation-oriented; queue lifecycle and timing live at the provider layer.
Key API
Toast.Provider
Use defaultDurationMs and maxVisible to define queue pacing and stacking behavior for the whole app.
useToast
Call enqueue, remove, and clear from application code without manually threading toast state everywhere.
Toast.Viewport
Mount the viewport once where toast surfaces should render and stack.
Toast.Action / Toast.Close
Use these parts for explicit user actions and dismiss controls inside the toast surface.
Composition Patterns
Global save feedback
Mount one provider and viewport high in the tree, then enqueue short descriptive toasts from feature code.
Undoable actions
Use Toast.Action when the toast should offer one meaningful follow-up action without becoming a full dialog.
Cautions / Limits
- A provider without a mounted viewport can still manage queue state, but nothing will render visibly.
- Toasts are intentionally transient; use
Dialogor inline validation when the user must acknowledge or resolve something before proceeding. - Queue timing belongs to
Toast.Provider; surface response and reduced-motion behavior belong inmotion.