Vue
Toasts
Toast types, create call styles, per-toast overrides, positions, duplicate prevention, and lifecycle hooks.
This page covers the toast payload model and how show, update, and dismiss work.
Types
Toastflow supports seven toast types:
loading
Async work in progress. Progress bar is disabled, duration is infinite.
default
Neutral notification without a specific semantic.
success
Positive outcome confirmation.
error
Failure or critical issue.
info
Informational message.
warning
Warning that requires attention.
custom
No preset colors. Use with
theme or css for fully branded toasts.Create Toasts
Use the call style that makes the content clearest at the call site.
toast.show({
type: "success",
title: "Saved",
description: "Done",
});
toast.show("Saved", {
type: "success",
description: "Done",
});
toast.success({
title: "Saved",
description: "Done",
});
Try this example
Buttons mirror the three create call styles shown above.