CustomToast.cmp

<!--
 - Created by kmachhewar on 5/26/18.
 -->

<aura:component description="CustomToast">
    <aura:attribute name="title"    type="String" default="" />
    <aura:attribute name="type"     type="String" default="" />
    <aura:attribute name="message"  type="String" default="" />
    <aura:attribute name="showMessage" type="Boolean" default="false" />
    <aura:attribute name="messages" type="Object[]" default="[]"/>

    <aura:handler event="c:showToast" action="{!c.handleShowToastEvent}"/>
    <div class="messagePanel slds-align_absolute-center" style="position: absolute;z-index:99; margin-left: auto;margin-right: auto;left: 0;right: 0;">
        <div class="slds-grid slds-grid_vertical">
            <aura:iteration items="{!v.messages}" var="messageElement">
                <div class="slds-col slds-size_1-of-1">
                    <div  class="slds-notify_container slds-is-relative">
                        <div aura:id="messagePanelDiv" class="{! 'slds-notify slds-notify_toast slds-theme_'+messageElement.type}"  role="alert">
                            <span class="slds-assistive-text">{!v.type}</span>
                            <span  aura:id="messagePanelSpan" class="{! 'slds-icon_container slds-m-right_small slds-no-flex slds-align-top slds-icon-utility-'+messageElement.type}" title="Description of icon when needed">
                            <lightning:icon iconName="{! 'utility:'+messageElement.type }" alternativeText="Error" variant="inverse"/>
                        </span>
                            <div class="slds-notify__content">
                                <h2 class="slds-text-heading_small">{!messageElement.title}</h2>
                                <p>{!messageElement.message}</p>
                            </div>
                            <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" onclick="{!c.closeMessage}" title="Close">
                                <lightning:icon iconName="utility:close" alternativeText="Close" variant="inverse" />
                                <span class="slds-assistive-text">Close</span>
                            </button>
                        </div>
                    </div>
                </div>
            </aura:iteration>
        </div>
    </div>
</aura:component>