Let’s create a simple Lightning Component that will display Toast messages like below:
We are going to call this component simply toast. Below is the markup and the controller code of the component.
We will need a new Lightning event that will trigger the Toast component and relay all the necessary information to it (type, title, description, and the length in miliseconds for which the Toast message should be shown). We’ll name this event showToastEvent:
That’s it, we have all the necessary ingredients to use this simple Toast component anywhere within the rest of our lightning components.
How to use it?
The first step to use this component is to add it to you Lightning component by simply adding the following markup <c:toast />. I usually add this component to the root of my Lightning components hierarchy because the event showToastEvent is an APPLICATION event, so it will be catched here no matter from where it was emitted.
The second and the last step is to simply trigger this event from any of your Lightning components controller or helper code.