<aura:component implements="flexipage:availableForRecordHome" access="global">
    <lightning:unsavedChanges aura:id="unsaved"
                              onsave="{!c.handleSave}"
                              ondiscard="{!c.handleDiscard}" />
    <lightning:button label="Make Unsaved Changes" onclick="{!c.makeUnsavedChanges}" />
    <lightning:button label="Clear Unsaved Changes" onclick="{!c.clearUnsavedChanges}" />
<aura:component>

({
     makeUnsavedChanges: function(cmp, evt, helper) {
         var unsaved = cmp.find("unsaved");
         unsaved.setUnsavedChanges(true, { label: 'My component name' });
     },
     clearUnsavedChanges: function(cmp, evt, helper) {
         var unsaved = cmp.find("unsaved");
         unsaved.setUnsavedChanges(false);
     },
     handleSave: function(cmp, evt, helper) {
         ... my custom save logic
         // When the custom save logic has completed the setUnsavedChanges method
         // must be called again to return control to the lightning UI
         var unsaved = cmp.find("unsaved");
         if (something went wrong) {
           // return control to the lightning UI while indicating that the content is still unsaved, preventing it from being dismissed
           unsaved.setUnsavedChanges(true);
         }
         else {
           // return control to the lightning UI while indicating that the content is saved
           unsaved.setUnsavedChanges(false);
         }
     },
     handleDiscard: function(cmp, evt, helper) {
        // similar to the handleSave method, but for discarding changes
     }
})