Toast Notification¶

Usage¶

When to use¶

• Useful to show system or application level feedbacks and status. For example, lost network, number of items exceeded etc.
• Toasts display time based short and clear messages to user.
• Use these to give feedback based on information, warning, success and error.

Dos and don'ts¶

• Keep the message context-based and under two lines.
• Appearance should be on the bottom right corner.
• Make toasts last for minimum 4-5 seconds.
• Toast notifications have a fixed width.

Where Toast Notifications may not help¶

• Do not use for critical feedbacks.
• Do not use toasts for synchronous/co-occurring tasks like showing progress.
• Success toasts should not be used for every minor level use cases.

Design¶

1. Icon: Informs users about the severity of a notification.
2. Title: Provides user with a quick overview about notification. Avoid words like Information, Danger, Warning or Success in the title, use a real subject as a label.
3. Content: Provides additional details of the notification.
4. Close: A button to manually dismiss the notification (optional).
5. Timer: Timer visualization until the notification disappears (with timer variant).

Notification Types¶

Notification Variants¶

Code¶

Used to display a notification as a toast that pops up from the bottom-right corner of the screen.

Usage¶

In any component the following steps need to be taken in order to display a toast notification:

• An instance of the SiToastNotificationService needs to get imported and instantiated in your component's constructor.
• A variable of type SiToast needs to get created.
• The SiToastNotificationService has a method called showToastNotification. Call this method, and pass the previously created SiToast as the argument.

See the comments below for an example component that satisfies the above criteria. Notice the showToast method that gets called when the Show Toast button is clicked.