This component is a must have for material design frameworks, it's a new way to display informations to your user, showing him small messages box, that appear on a corner of the screen, as well a desktop screen to a smartphone screen.
To add a custom message to your toasts and snackbars, you just have to fill the proper attribute
(data-toast-inner) on the trigger :
<a href="#toast1" data-toast-inner="I'm a toast message" data-toggle="toast">Show toast</a>
And repeat the operation to add a text to a snackbar :
<a href="#snackbar1" data-snackbar-inner="I'm a snackbar message" data-toggle="snackbar">Show snackbar</a>
Of course, the good thing about those toasts & snackbars, is that they are fully customizables, you can set any messages or auto generated messages, for example :
var i = 0;
href="#toast1" <!-- Toast target-->
data-toggle="toast" <!-- Which toggle <toast><snackbar>-->
data-toast-posy="bottom" <!-- Position on Y axis-->
data-toast-posx="right" <!-- Position on X axis-->
data-toast-inner="Hello" <!-- Message of the toast-->
data-toast-delay="5" <!-- Delay until fadeout-->
>Show Toast top left<a>
This is a, example of what is possible with those toasts and snackbars, you can of course merge them with a templating system such as handlebars.