Simple Toast Notification

Content Type: Module
Categories: User Interface


This is a module providing a basic widget and a JavaScript action to show a simple toast notification in one of the four corners or the top/bottom middle of the page.


The toast notification may be given any message, a set duration and a rendering style + location to your liking. On top of that you may provide a custom styling class to style the toast notification even more.


This toast notification implementation does not require an entity, not even a non-persistent entity. It may only be triggered from a Nanoflow but it is extremely light weight. And it follows the colours set in the variables for success, info, warning, danger, default and inverse.


Demo url

Typical usage scenario

When you just want to show your users a small message that is not blocking their interaction with the application. 


Features and limitations

  • Show a toast with any given message
  • Set the duration of how long the toast shows
  • Choose the location (any of the four corners)
  • Choose the rendering style: default, info, success, warning, danger or inverse. 
  • Give the toast a custom class for additional styling.

You will need to trigger the toast from a nanoflow as it uses a JavaScript action.

Only one toast may be shown at a time.

The toast disappears based on the duration, a user may not click away the toast.



Everything is included in the module, a widget and a JavaScript action to show the toast.



  1. Include the SNP_ToastBase anywhere in your page or if used across your application anywhere in your layout.
  2. Trigger the toast from a Nanoflow by calling the `Show Toast` Nanoflow action.



Future planned work

Future planned work in now specific order of priority

  • Do not hide the toast when a user hovers over the toast
  • Allow multiple toasts at once
  • Allow toast stacking to allow multiple toasts in one location
  • Allow interaction (trigger microflow, nanoflow or open page when a user clicks the toast)


Version: 1.1.0
Framework Version: 9.24.15
Release Notes: - Added bottom/top center positioning - Added onclick to close toaster
Version: 1.0.0
Framework Version: 9.24.15
Release Notes: Initial release