IToast

View source on GitHub

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.

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

Property	Type	Description
type	ToastType	Defines the toast type, which determines the toast color and icon
title	string	Defines the toast title
withCross?	boolean	Specifies 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?	number	Defines 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

View source on GitHub

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