Skip to main content

IToast

A brief notification that appears on the screen.

To display a toast, return an IMessage with Actions.showToast in actions and pass the toast configuration in the toastProps array.

toasttoast

Examples​

Auto-dismissing success notification

const saveSuccess: IToast = {
type: ToastType.success,
title: "Changes saved successfully",
withCross: false,
timeout: 3000 // Dismiss after 3 seconds
}

Persistent error notification with manual dismiss

const errorToast: IToast = {
type: ToastType.error,
title: "Failed to upload file. Please try again.",
withCross: true,
timeout: 0 // Stay until manually dismissed
}

Session expiration warning with medium duration

const warningToast: IToast = {
type: ToastType.warning,
title: "Your session will expire in 5 minutes",
withCross: true,
timeout: 5000
}

Temporary update notification

const infoToast: IToast = {
type: ToastType.info,
title: "New updates are available",
withCross: false,
timeout: 4000
}

Properties​

PropertyTypeDescription
typeToastTypeDefines the toast type, which determines the toast color and icon
titlestringDefines the toast title
withCross?booleanSpecifies whether the "Close" button will be displayed in the toast to close it (true). Otherwise, the toast will disappear after clicking on any toast area (false).
timeout?numberDefines the time (in milliseconds) for showing the toast. Setting the value to 0 allows the toast to be displayed continuously until clicking on it.

ToastType​

The supported toast types.

Enumeration Members​

success​

success: "success";

Success toast with green color scheme

error​

error: "error";

Error toast with red color scheme

warning​

warning: "warning";

Warning toast with yellow color scheme

info​

info: "info";

Info toast with blue color scheme