--- title: Fliplet.UI.Toast() description: "Show minimal or regular auto-dismissing toast notifications with title, message, position, duration, progress bar, and action buttons via Fliplet.UI.Toast." type: api-reference tags: [js-api, toast] v3_relevant: true deprecated: false exclude_from_v3_catalog: true --- # `Fliplet.UI.Toast()` Show a non-blocking toast notification via `Fliplet.UI.Toast()` — in compact `minimal` or attention-grabbing `regular` styling — with configurable title, message, position, duration, optional progress bar, and call-to-action buttons. The constructor returns a Promise resolving to a toast instance with `dismiss` and `setProgress` controls. There are 2 different types of Toast notifications, **minimal** and **regular**.
Minimal Toast Notification Regular Toast Notification

A minimal toast notification provides brief feedback about an operation with the least amount of interruption to the user.

Minimal toast notifications are usually displayed at the bottom of the screen.

A regular toast notification occupies more substantial space and is styled to attract more attention from the user. This can be used to provide timely and relevant information about your app and current operation.

Regular toast notifications are usually displayed at the top of the screen.
Minimal Toast Notification Regular Toast Notification
## Usage ```js Fliplet.UI.Toast(message) ``` * **message** (String) Content to be displayed in the Toast notification. This generates a `minimal` Toast notifications, and the content be truncated to 2 lines. ```js Fliplet.UI.Toast(options) ``` * **options** (Object) A map of options to pass to the constructor. * **type** (String) (`minimal` or `regular`) Use this to determine the type of Toast notification to generate. (**Default**: `minimal`) * **position** (String) (`top`, `center` or `bottom`) Use this to configure the placement of the Toast notification. By default, `minimal` Toast notifications are displayed at the `bottom` and `regular` Toast notifications are displayed at the `top`. Toast UIs positioned in the center are automatically resized to the size of the content instead of a set width. * **backdrop** (Boolean) If `true`, an 60% opaque black backdrop will be added behind the Toast UI. Clicking/tapping on the backdrop will close the Toast UI unless `tapToDismiss` is set to `false`. (**Default**: `false`) * **tapToDismiss** (Boolean) If `true`, the Toast UI and overlay (if applicable) will be dismissed when user clicks/taps on the Toast UI and overlay. (**Default**: `true`) * **duration** (String, Number or Boolean) (`short`, `long`, `none` or `false`) Pass a number to determine how long (in milliseconds) the Toast notification will be on screen before it is automatically dismissed. If the string `none` or boolean value `false` is passed, the Toast notification will remain visible until `.dismiss()` is called to dismiss the notification. The keywrods `short` and `long` can also be used to set the duration to `2000` and `4000` milliseconds respectiverly. (**Default**: `4000`) * **title** (String) The `regular` Toast notification design allows an optional title to be included. * **message** (String) Content to be displayed in the Toast notification. `regular` Toast notifications will truncate this to 3 lines. `minimal` Toast notifications will truncate this to 2 lines. * **progress** (Boolean) If `true`, a progress bar will be included. The progress bar can be controlled with the `.setProgress()` method. If the progress bar is included, the Toast notification will not be dismissed automatically. * **html** (String) Use this to set a custom content to the Toast notification. If `html` is set, `title` and `message` will be ignored. * **actions** (Array) An array of call-to-actions to include in the Toast notification. Each call-to-action is configured through an object with the following properties: * **label** (String) Label text for the call-to-action. * **icon** (String) FontAwesome icon name to be added to the action, e.g. `fa-times`. * **action** (Object or Function) If an object is passed, the object will be passed to `Fliplet.Navigate.to()` when user interacts with the call-to-action. If a function is passed, the function will be executed with the index passed as the first parameter and the `this` variable will contain the original object passed to the `Fliplet.UI.Toast()` constructor. **Note** Executing an action will automatically dismiss the Toast notification, unless the callback function returns `false`. ## Properties The promise resolves with the toast instance as its first parameter. This instance object comprises the following properties. * **data** (Object) A data object containing the configuration fro the Toast notification. ## Methods `Fliplet.UI.Toast` contains the following methods. To utilize these methods, it's important to ensure that they are invoked after the resolution of the `Fliplet.UI.Toast()` function. ### `Fliplet.UI.Toast.dismiss()` (Returns **Promise**) Dismisses the Toast notification. The promise is fulfilled when the Toast notification is removed from the page. ```js Fliplet.UI.Toast.dismiss() ``` ### `Fliplet.UI.Toast.open()` (Returns **Promise**) Runs an action associated with the active Toast notification. The promise is fulfilled when the Toast notification is removed from the page or when the action is is executed. The promise is rejected if there is no active Toast notification. ```js Fliplet.UI.Toast.open(index) ``` * **index** (Number) A 0-based index referencing the call-to-action to execute. If an `index` is not provided or is invalid, no actions will be executed. ### `Fliplet.UI.Toast.setProgress()` (Returns **Promise**) If a progress bar is present, sets the progress bar to the given progress for the active Toast notification. The promise is fulfilled when the progress bar has stopped transitioning to the new progress point. The promise is rejected if there is no active Toast notification. ```js Fliplet.UI.Toast.setProgress(percent) ``` * **percent** (Number) A number between 0 and 1 that is used to set the progress bar, where 1 implies a 100% progress. --- The toast instance is returned as the first parameter in the promise resolving. The instance object contains the following methods. ### `.dismiss()` (Returns **Promise**) Dismisses the Toast notification. The promise is fulfilled when the Toast notification is removed from the page. ```js .dismiss(); ``` ### `.open()` (Returns **Promise**) Opens the Toast notification by executing one of the call-to-actions. The promise is fulfilled when the Toast notification is removed from the page or when the action is executed. ```js .open(index) ``` * **index** (Number) A 0-based index referencing the call-to-action to execute. If an `index` is not provided or is invalid, no actions will be executed. ### `.setProgress()` (Returns **Promise**) If a progress bar is present, sets the progress bar to the given progress. The promise is fulfilled when the progress bar has stopped transitioning to the new progress point. ```js .setProgress(percent) ``` * **percent** (Number) A number between 0 and 1 that is used to set the progress bar, where 1 implies a 100% progress. ## Examples ### Display a minimal Toast notification ```js Fliplet.UI.Toast('App updated'); ``` ### Displays a regular Toast notification, then a minimal Toast notification ```js Fliplet.UI.Toast({ type: 'regular', title: 'John Appleseed', message: 'Here’s to the crazy ones. The misfits. The rebels. The troublemakers. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things.', actions: [ { label: 'Who said this?', action: function () { var title = this.data.title; Fliplet.UI.Toast(title); // Initiating a new Toast notification will automatically dismiss all existing Toast notifications return false; } } ] }) ``` ## Related * [Error Toast](fliplet-ui-toast-error) --- [Back to Fliplet.UI](./fliplet-ui) {: .buttons}