UnsavedChangesDemo.xml

<aura:component implements="flexipage:availableForRecordHome" access="global" >
    
    <!--intantiating unsaved changed component -->
    <lightning:unsavedChanges aura:id="unsavedData" 
                              onsave="{!c.saveData}"
                              ondiscard="{!c.discardData}"/>
    
    <lightning:card title="Create Account">
        <!-- Handle name change, make unsaved changes in this action as user has typed some value-->        
        <lightning:input name="Name" aura:id="name" label="Enter name" onchange="{!c.handleDataChange}"/>
        <!-- Handle phone change, make unsaved changes in this action as user has typed some value-->        
        <lightning:input name="Phone" aura:id="phone" type="tel" label="Enter phone number" onchange="{!c.handleDataChange}"/>
        <!-- Handle save action, clear unsaved changes in this action -->
        <lightning:button label="Save Account" onclick="{!c.saveAccount}" />
    </lightning:card>
</aura:component>