Toast Specification

Overview

igx-toast is a circular-shaped component, usually used to indicate that there is an update on status of the item related to (such as avatar, navigation menu, list item or anywhere else in an app where some active indication is required).

<igx-toast message="Something happened">
</igx-toast>

Objectives

Equip citizen developers with a toast component that is primarily used for system messaging at the bottom of the screen. It will not contain actions and cannot be swiped off screen.

User Stories

Developer

As a citizen developer, I want to be able to call a toast component programmatically so I can notify the application users with system critical messages that they could not swipe off the screen.

End user

As an end user, I want to see a toast message on top of my application that gives me critical information that I must be aware of.

Acceptance criteria

Toast (system messaging):

Аppears at bottom, middle or top of the screen
Цontains text only (NO icons or buttons)
Мay NOT be swiped off - they disappear automatically

Functionality

End User Experience

A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content.

Toasts can be positioned at the top, bottom or middle of the view port and is dismissed automatically after a specific amount of time.

Developer Experience

<button (click)="toast.show()">Show toast</button>

<igx-toast #toast 
   message="This is very important!">
</igx-toast>

User Interface

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive.

The end user interface consists only of a text message.

Toast

Navigation

The toast is a non-interactive component.

API

Properties
autoHide - Sets if the IgxToast component will be hidden after shown. Default value is true.
displayTime - The duration of time span in ms which the IgxToast component will be visible after it is being shown. Default value is 4000.
isVisible - The IgxToast component visual state state. Default value is false.
message - The message that will be shown message by the IgxToast component.
actionText- The text of the IgxSnackbar component action
Methods
show() - Shows the IgxToast component and hides it after some time span if autoHide is enabled.
hide() - Hides the IgxToast component.
Events
onAction- The event that will be thrown when the action is executed, provides reference to the IgxSnackbar component as argument.