Hi friends, In this post i will provide an example to show different types of alerts in lightning component. This will help you to show notification in attractive way in lightning components.

Alerts in lightning component

In lightning components we have multiple alerts. Please see below examples

1. Info Alert 

 <aura:component>    
    <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info" role="alert">
        <span class="slds-assistive-text">info</span>
        <span class="slds-icon_container slds-icon-utility-user slds-m-right_x-small" title="Description of icon when needed">
            <lightning:icon iconName="standard:user" alternativeText="info" title="info" />            
        </span>
        <h2>Logged in as John Smith (johnsmith@acme.com).<a href="javascript:void(0);">Log out</a></h2>
        <div class="slds-notify__close">
            <button class="slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse" title="Close">
                <lightning:icon iconName="action:close" alternativeText="close" title="close" size="xx-small"/>                
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
    </div>
 </aura:component>
Output:

2. Warning Alert
 <aura:component>    
    <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
        <span class="slds-assistive-text">Warning</span>
        <span class="slds-icon_container slds-icon-utility-user slds-m-right_x-small" title="Description of icon when needed">
            <lightning:icon iconName="utility:warning" alternativeText="warning" title="warning" />            
        </span>
        <h2>Your browser is outdated. Your Salesforce experience may be degraded.
            <a href="javascript:void(0);">More Information</a>
        </h2>
        <div class="slds-notify__close">
            <button class="slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse" title="Close">
                <lightning:icon iconName="utility:close" alternativeText="close" title="close" size="x-small"/>                
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
    </div>
 </aura:component>
Output:


 3. Error Alert

 <aura:component>    
    <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
        <span class="slds-assistive-text">Error</span>
        <span class="slds-icon_container slds-icon-utility-user slds-m-right_x-small" title="Description of icon when needed">
            <lightning:icon iconName="utility:error" alternativeText="error" title="error" />            
        </span>
        <h2>Your browser is currently not supported. Your Salesforce may be degraded.
            <a href="javascript:void(0);">More Information</a>
        </h2>
        <div class="slds-notify__close">
            <button class="slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse" title="Close">
                <lightning:icon iconName="utility:close" alternativeText="close" title="close" size="x-small"/>                
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
    </div>
 </aura:component>

Output:

 

Source: www.lightningdesignsystem.com

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.