7. Toast

Toast notifications are non-blocking messages that appear briefly on screen to inform the user about the outcome of an action.

context.toast.<type>(content [, duration, onClose])

Toast types

context.toast.success("Record saved successfully.");

context.toast.error("Something went wrong. Please try again.");

context.toast.info("Sync is in progress.");

context.toast.warning("This action cannot be undone.");

const hide = context.toast.loading("Uploading file...");
await uploadFile();
hide(); // dismiss the loading toast

Parameters

Prop

Type

Advanced usage — full config object

Pass a config object to context.toast.open() for full control over icon, style, key, and click handler:

context.toast.open({
  content: "Invoice exported successfully.",
  type: "success",
  duration: 5,
  key: "export-toast",
  onClick: () => context.redirect("/invoices")
});

Dismissing a toast by key

context.toast.destroy("export-toast");

Pro Tip

Assign a key to a toast and call context.toast.destroy(key) to dismiss it programmatically — useful for replacing a loading toast with a success or error result.

Real-world example — validation with error toast

var updates = context.event.updates;
var innerValue = context.event.innerValue;

if (updates.StartDate) {
  var d1 = new Date(updates.StartDate);
  var d2 = new Date(innerValue.EndDate);
  var difference = getDaysDifference(d1, d2);

  updates.TotalDaysOff = difference.days;
  updates.DurationHours = difference.hours;

  if (difference.days === 0 && difference.hours === 0 && difference.minutes === 0) {
    context.toast.error("Start date and end date cannot be the same.");
  }
}