Lightning - Displaying a system toast with a few lines of code

toaster.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    <div class="slds-m-around--xx-large slds-text-align--center">
        <lightning:button label="Fire toast event" onclick="{! c.fireToastEvent }"/>
    </div>
</aura:component>

toasterController.js

({
    fireToastEvent : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "It works!",
            "type": "success"
        });
        toastEvent.fire();
    }
})

Deploy the component either:

• as a new Lightning Component tab
• in an existing Lightning page using the Lightning Application Builder

I want to display a toast at an existing component. A notification should show on click of a certain button, how do I go about that?

Hi @Alimali-Stephen, I'm not sure about what you mean by an existing component. Is that a custom component that you can edit?
If not, you won't be able to plug this code sample into it.

Yes it's a component that you can edit. I just need to add a method on the code that will show notification to users on click of a button.