cancel button help

You can check that code you only have to change some code like change button to cancel and their event as well.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
 <div>
    HI I AM COMPONENT AND I AM GETTING CALLED FROM VF.
    </div>
    <aura:attribute name="VfPageMethod" type="object"/>  <!--Attribute to take Vf page method-->
    <lightning:button label="Click me to pass message to VF page" onclick="{!c.doAction}"/>
</aura:component>

COMPONENT JS CONTROLLER

({
 doAction : function(component, event, helper) {
  var msgForVf="Hi This message was pass from component to me and I am VF page displaying this message";
        var vfMethod=component.get("v.VfPageMethod");
        // Calling Vf page method
        vfMethod(msgForVf,function()
                           {
     
                           });
 }
})

VISUALFORCE PAGE (Name: VfPageToCallLightningComp)

<apex:page >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />
   
    <script>
        $Lightning.use("c:LightningCompForVFAPP", function() {
            $Lightning.createComponent("c:LightningCompForVF", {
            VfPageMethod:getMessageFromComp,
            },
            "LightningCompContainer",
            function(cmp) {
             
            });
        });
    function getMessageFromComp(compMsg)
    {
        alert(compMsg);
    }
    </script>
</apex:page>

LIGHTNING APP (Name: LightningCompForVFAPP)

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:LightningCompForVF"/>
</aura:application>