Salesforce Lightning Custom Notification Style
As a Salesforce Lightning Developer, many times you need to create custom notifications, below are some generic notification style with sample code which you can use in the custom lightning component.
Alert Notification
Usage — Can be used to display the notification on Component Page as an inline message.
Success
Preview
Sample Code
<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_success” role=”alert”>
<span class=”slds-icon_container slds-m-right_x-small” title=”Success Sample Notification”>
<lightning:icon iconName=”utility:success” alternativeText=”info” size=”x-small” variant=”inverse”/>
</span>
<h2>Success Sample Notification, Success Sample Notification</h2>
</div>
Error
Preview
Sample Code
<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error” role=”alert”>
<span class=”slds-icon_container slds-m-right_x-small” title=”Description of icon when needed”>
<lightning:icon iconName=”utility:clear” alternativeText=”info” size=”x-small” variant=”inverse”/>
</span>
<h2>Failure Sample Notification, Failure Sample Notification</h2>
</div>
Warning
Preview
Sample Code
<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning” role=”alert”>
<span class=”slds-icon_container slds-m-right_x-small” title=”Description of icon when needed”>
<lightning:icon iconName=”utility:warning” alternativeText=”Warning” size=”x-small” variant=”inverse”/>
</span>
<h2>Warning Sample Notification, Warning Sample Notification</h2>
</div>
Information
Preview
Sample Code
<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info” role=”alert”>
<span class=”slds-icon_container slds-m-right_x-small” title=”Description of icon when needed”>
<lightning:icon iconName=”utility:info” alternativeText=”info” size=”x-small” variant=”inverse”/>
</span>
<h2>Information Sample Notification, Information Sample Notification</h2>
</div>
Toast Notification
Usage — Can be used to display Notification on User action at Database level
Generic helper.js method
showToast : function(component, title, type, message) {
var toastEvent = $A.get(“e.force:showToast”);
toastEvent.setParams({
“title”: title,
“type” : type,
“message”: message,
“mode”: “dismissible”
});
toastEvent.fire();
},
Success
Preview
Controller.js Code
helper.showToast(component, ‘Success’, ‘success’, ‘Success Toast Notification.’);
Error
Preview
Controller.js Code
helper.showToast(component, ‘Error’, ‘error’, ‘Failure Toast Notification.’);
Warning
Preview
Controller.js Code
helper.showToast(component, ‘Warning’, ‘warning’, ‘Warning Toast Notification.’);
Info
Preview
Controller.js Code
helper.showToast(component, ‘Information’, ‘info’, ‘Info Toast Notification.’);
Hope this will help you!
